{"id":14990486,"url":"https://github.com/prismaui/prismaui","last_synced_at":"2026-02-06T13:02:41.981Z","repository":{"id":167284313,"uuid":"642808091","full_name":"prismaui/prismaui","owner":"prismaui","description":"Prismaui Component Library","archived":false,"fork":false,"pushed_at":"2023-12-17T16:05:36.000Z","size":5651,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-06-25T09:49:01.688Z","etag":null,"topics":["component","frontend","ui","uikit","uilibrary","webcomponents","webcomponents-framework"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/prismaui.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-05-19T11:47:27.000Z","updated_at":"2023-06-08T06:49:58.000Z","dependencies_parsed_at":"2023-12-17T17:30:10.595Z","dependency_job_id":"21bab9e4-266f-4f4c-95d4-cb059023f3ff","html_url":"https://github.com/prismaui/prismaui","commit_stats":{"total_commits":162,"total_committers":3,"mean_commits":54.0,"dds":"0.012345679012345734","last_synced_commit":"64bc1bd911981e5d4c0675737f3d3174f8d350f8"},"previous_names":["prismaui/prismaui"],"tags_count":40,"template":false,"template_full_name":null,"purl":"pkg:github/prismaui/prismaui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prismaui%2Fprismaui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prismaui%2Fprismaui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prismaui%2Fprismaui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prismaui%2Fprismaui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/prismaui","download_url":"https://codeload.github.com/prismaui/prismaui/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prismaui%2Fprismaui/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266086538,"owners_count":23874491,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component","frontend","ui","uikit","uilibrary","webcomponents","webcomponents-framework"],"created_at":"2024-09-24T14:20:12.992Z","updated_at":"2026-02-06T13:02:41.861Z","avatar_url":"https://github.com/prismaui.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Installation/ For React\n\nTo install `@prismaui/react`, you can use npm or yarn:\n\n```bash\nnpm install @prismaui/react\n```\n\nor\n\n```bash\nyarn add @prismaui/react\n```\n\n## Usage\n\nTo use `@prismaui/react`, follow the steps below:\n\n1. Import the desired components from `@prismaui/react` in your React component file (e.g., `App.js`):\n\n```jsx\n'use client'\nimport { defineCustomElements, PrmButton } from '@prismaui/react'\n\ndefineCustomElements()\n\nfunction App() {\n  return (\n    \u003cdiv\u003e\n      \u003cPrmButton round=\"lg\" variant=\"primary\"\u003eClick Me\u003c/PrmButton\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default App;\n```\n\n2. You can now use the Prisma UI components like the `PrmButton` component in your React application.\n\nTo add the custom color variables to your CSS file, you can follow these steps:\n\n1. Open your CSS file (e.g., `global.css`).\n\n2. Add the following CSS code to your global CSS Variables:\n\n```css\n:root {\n  /* Primary Colors */\n  --primary: #1E3A8A;\n  --primary-light: #4A5A99;\n  --primary-dark: #0F2658;\n\n  /* Secondary Colors */\n  --secondary: #9F38B4;\n  --secondary-light: #D275DF;\n  --secondary-dark: #6D0E82;\n\n  /* Success Colors */\n  --success: #10B981;\n  --success-light: #43D2A9;\n  --success-dark: #0E7D58;\n\n  /* Warning Colors */\n  --warning: #F59E0B;\n  --warning-light: #FFC94D;\n  --warning-dark: #D9820E;\n\n  /* Danger Colors */\n  --danger: #EF4444;\n  --danger-light: #F48080;\n  --danger-dark: #BE2E2E;\n\n  /* Info Colors */\n  --info: #3B82F6;\n  --info-light: #6696F6;\n  --info-dark: #1D4ED8;\n\n  /* Neutral Colors */\n  --lightest: #F3F4F6;\n  --lighter: #FFFFFF;\n  --light: #D1D5DB;\n  --dark: #1F2937;\n  --darker: #6B7280;\n  --darkest: #111827;\n}\n```\n\nNow, the custom color variables are defined and can be used throughout your React application.\n\n## Contributing\n\nContributions are welcome! If you find any issues or have suggestions for improvements, please open an issue or submit a pull request on the [GitHub repository](https://github.com/prismaui/prismaui).\n\n## License\n\nThis package is licensed under the [MIT License](https://opensource.org/licenses/MIT).\n\n\n## Installation / For Vue\n\n```shell\nnpm i @prismaui/vue\n```\n\n## Configuration\n\nUpdate your generated `vite.config.ts` file as follows:\n\n```diff\nexport default defineConfig({\n  plugins: [\n-    vue(),\n-    vueJsx(),\n+    vue({\n+      template: {\n+        compilerOptions: {\n+          // Treat all tags with a dash as custom elements\n+          isCustomElement: (tag) =\u003e tag.includes('-'),\n+        },\n+      },\n+    }),\n+    vueJsx(),\n  ],\n  resolve: {\n    alias: {\n      '@': fileURLToPath(new URL('./src', import.meta.url))\n    }\n  }\n})\n\n```\n\nUpdate your `main.ts` and add Prisma UI Components in the `use()` wrapper:\n\n```diff\nimport './assets/main.css'\nimport { PrmButton } from '@prismaui/vue';\n\nimport { createApp } from 'vue'\nimport App from './App.vue'\n\ncreateApp(App).use(PrmButton).mount('#app')\n\n```\n\n## Custom CSS Variables\n\nUpdate your `base.css` file to include the following CSS variables:\n\n```css\n:root {\n  /* Primary Colors */\n  --primary: #1E3A8A;\n  --primary-light: #4A5A99;\n  --primary-dark: #0F2658;\n\n  /* Secondary Colors */\n  --secondary: #9F38B4;\n  --secondary-light: #D275DF;\n  --secondary-dark: #6D0E82;\n\n  /* Success Colors */\n  --success: #10B981;\n  --success-light: #43D2A9;\n  --success-dark: #0E7D58;\n\n  /* Warning Colors */\n  --warning: #F59E0B;\n  --warning-light: #FFC94D;\n  --warning-dark: #D9820E;\n\n  /* Danger Colors */\n  --danger: #EF4444;\n  --danger-light: #F48080;\n  --danger-dark: #BE2E2E;\n\n  /* Info Colors */\n  --info: #3B82F6;\n  --info-light: #6696F6;\n  --info-dark: #1D4ED8;\n\n  /* Neutral Colors */\n  --lightest: #F3F4F6;\n  --lighter: #FFFFFF;\n  --light: #D1D5DB;\n  --dark: #1F2937;\n  --darker: #6B7280;\n  --darkest: #111827;\n}\n```\n\n## Usage\n\nIn your Vue pages, you can now use the components from `@prismaui/vue`. \n\n```vue\n\u003cscript setup lang=\"ts\"\u003e\nimport { PrmButton } from '@prismaui/vue';\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cPrmButton variant=\"info\"\u003etest\u003c/PrmButton\u003e\n\u003c/template\u003e\n```\n\nMake sure to import the required components and use them accordingly in your Vue files.\n\n\n# @prismaui/angular\n\nThis is the documentation for the npm package `@prismaui/angular`. This package provides Angular components and functionality for the Prisma UI library.\n\n## Installation / For Angular\n\nTo install `@prismaui/angular`, you can use npm or yarn:\n\n```bash\nnpm install @prismaui/angular\n```\n\nor\n\n```bash\nyarn add @prismaui/angular\n```\n\n## Usage\n\nTo use `@prismaui/angular`, follow the steps below:\n\n1. Import the `PrmModule` from `@prismaui/angular` in your Angular module file (e.g., `app.module.ts`):\n\n```typescript\nimport { NgModule } from '@angular/core';\nimport { PrmModule } from '@prismaui/angular';\n\n@NgModule({\n  imports: [\n    // ...\n    PrmModule,\n    // ...\n  ],\n  // ...\n})\nexport class AppModule { }\n```\n\n2. In your Angular component template (e.g., `app.component.html`), you can now use the Prisma UI components:\n\n```html\n\u003cprm-button round=\"lg\" variant=\"primary\"\u003eClick Me\u003c/prm-button\u003e\n```\nTo add the custom color variables to your `global.css` file, follow these steps:\n\n1. Open your `global.css` file.\n\n2. Add the following CSS code at your `global.css` file:\n\n```css\n:root {\n  /* Primary Colors */\n  --primary: #1E3A8A;\n  --primary-light: #4A5A99;\n  --primary-dark: #0F2658;\n\n  /* Secondary Colors */\n  --secondary: #9F38B4;\n  --secondary-light: #D275DF;\n  --secondary-dark: #6D0E82;\n\n  /* Success Colors */\n  --success: #10B981;\n  --success-light: #43D2A9;\n  --success-dark: #0E7D58;\n\n  /* Warning Colors */\n  --warning: #F59E0B;\n  --warning-light: #FFC94D;\n  --warning-dark: #D9820E;\n\n  /* Danger Colors */\n  --danger: #EF4444;\n  --danger-light: #F48080;\n  --danger-dark: #BE2E2E;\n\n  /* Info Colors */\n  --info: #3B82F6;\n  --info-light: #6696F6;\n  --info-dark: #1D4ED8;\n\n  /* Neutral Colors */\n  --lightest: #F3F4F6;\n  --lighter: #FFFFFF;\n  --light: #D1D5DB;\n  --dark: #1F2937;\n  --darker: #6B7280;\n  --darkest: #111827;\n}\n```\n\nNow, the custom color variables are defined and can be used throughout your application.\n\n## Contributing\n\nContributions are welcome! If you find any issues or have suggestions for improvements, please open an issue or submit a pull request on the [GitHub repository](https://github.com/prismaui/prismaui).\n\n## License\n\nThis package is licensed under the [MIT License](https://opensource.org/licenses/MIT).\n# @prismaui/core\n\nThis is the documentation for the npm package `@prismaui/core`. This package provides core functionality for the Prisma UI library.\n\n## Installation / For Simple HTML\n\nTo install `@prismaui/core`, you can use npm or yarn:\n\n```bash\nnpm install @prismaui/core\n```\n\nor\n\n```bash\nyarn add @prismaui/core\n```\n\n## Usage\n\nTo use `@prismaui/core`, you can import the JavaScript module in multiple ways depending on your preference or project setup.\n\n### Method 1: Local import\n\nYou can import the module from the local `node_modules` directory:\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\n\u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n    \u003clink rel=\"stylesheet\" href=\"style.css\"\u003e\n    \u003ctitle\u003eDocument\u003c/title\u003e\n\u003c/head\u003e\n\n\u003cbody\u003e\n    \u003cprm-button round=\"lg\" variant=\"primary\"\u003eClick Me\u003c/prm-button\u003e\n\n    \u003cscript type=\"module\"\u003e\n        import { defineCustomElements } from './node_modules/@prismaui/core/loader/index.es2017.js';\n        defineCustomElements();\n    \u003c/script\u003e\n\u003c/body\u003e\n\n\u003c/html\u003e\n```\n\n### Method 2: Remote import via CDN\n\nYou can import the module directly from a CDN:\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\n\u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n    \u003clink rel=\"stylesheet\" href=\"style.css\"\u003e\n    \u003ctitle\u003eDocument\u003c/title\u003e\n\u003c/head\u003e\n\n\u003cbody\u003e\n    \u003cprm-button round=\"lg\" variant=\"primary\"\u003eClick Me\u003c/prm-button\u003e\n\n    \u003cscript type=\"module\"\u003e\n        import { defineCustomElements } from 'https://cdn.jsdelivr.net/npm/@prismaui/core/loader/index.es2017.js';\n        defineCustomElements();\n    \u003c/script\u003e\n\u003c/body\u003e\n\n\u003c/html\u003e\n```\n\n### Method 3: Local script import\n\nYou can directly include the JavaScript module using a script tag with the local path:\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\n\u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n    \u003clink rel=\"stylesheet\" href=\"style.css\"\u003e\n    \u003ctitle\u003eDocument\u003c/title\u003e\n\u003c/head\u003e\n\n\u003cbody\u003e\n    \u003cprm-button round=\"lg\" variant=\"primary\"\u003eClick Me\u003c/prm-button\u003e\n\n    \u003cscript type=\"module\" src=\"node_modules/@prismaui/core/dist/esm/prismaui.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n\n\u003c/html\u003e\n```\n\n### Method 4: Remote script import via CDN\n\nYou can include the JavaScript module directly from a CDN using a script tag:\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\n\u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n    \u003clink rel=\"stylesheet\" href=\"style.css\"\u003e\n    \u003ctitle\u003eDocument\u003c/title\u003e\n\u003c/head\u003e\n\n\u003cbody\u003e\n    \u003cprm-button round=\"lg\" variant=\"primary\"\u003eClick Me\u003c/prm-button\u003e\n\n    \u003cscript type=\"module\" src=\"https://cdn.jsdelivr.net/npm/@prismaui/core/loader/index.es2017.js\"\u003e\u003c/\n\nscript\u003e\n\u003c/body\u003e\n\n\u003c/html\u003e\n```\n\n### CSS\n\nInclude the following CSS variables in your `style.css` file:\n\n```css\n:root {\n    /* Primary Colors */\n    --primary: #1E3A8A;\n    --primary-light: #4A5A99;\n    --primary-dark: #0F2658;\n\n    /* Secondary Colors */\n    --secondary: #9F38B4;\n    --secondary-light: #D275DF;\n    --secondary-dark: #6D0E82;\n\n    /* Success Colors */\n    --success: #10B981;\n    --success-light: #43D2A9;\n    --success-dark: #0E7D58;\n\n    /* Warning Colors */\n    --warning: #F59E0B;\n    --warning-light: #FFC94D;\n    --warning-dark: #D9820E;\n\n    /* Danger Colors */\n    --danger: #EF4444;\n    --danger-light: #F48080;\n    --danger-dark: #BE2E2E;\n\n    /* Info Colors */\n    --info: #3B82F6;\n    --info-light: #6696F6;\n    --info-dark: #1D4ED8;\n\n    /* Neutral Colors */\n    --lightest: #F3F4F6;\n    --lighter: #FFFFFF;\n    --light: #D1D5DB;\n    --dark: #1F2937;\n    --darker: #6B7280;\n    --darkest: #111827;\n}\n```\n\n## Contributing\n\nContributions are welcome! If you find any issues or have suggestions for improvements, please open an issue or submit a pull request on the [GitHub repository](https://github.com/prismaui/prismaui).\n\n## License\n\nThis package is licensed under the [MIT License](https://opensource.org/licenses/MIT).\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprismaui%2Fprismaui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprismaui%2Fprismaui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprismaui%2Fprismaui/lists"}