{"id":24499697,"url":"https://github.com/codewithkyle/brixi-ui","last_synced_at":"2025-10-07T13:02:28.581Z","repository":{"id":46402358,"uuid":"271347483","full_name":"codewithkyle/brixi-ui","owner":"codewithkyle","description":"A sleek \u0026 slender design system built on web components.","archived":false,"fork":false,"pushed_at":"2024-03-21T19:10:48.000Z","size":9117,"stargazers_count":2,"open_issues_count":9,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-11T14:52:21.133Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://ui.brixi.dev","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/codewithkyle.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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}},"created_at":"2020-06-10T17:55:55.000Z","updated_at":"2024-03-27T13:33:35.000Z","dependencies_parsed_at":"2023-01-31T23:31:05.793Z","dependency_job_id":"886bc1b6-5b62-4c59-9b67-f00efee257cb","html_url":"https://github.com/codewithkyle/brixi-ui","commit_stats":null,"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codewithkyle%2Fbrixi-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codewithkyle%2Fbrixi-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codewithkyle%2Fbrixi-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codewithkyle%2Fbrixi-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codewithkyle","download_url":"https://codeload.github.com/codewithkyle/brixi-ui/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243695595,"owners_count":20332629,"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":[],"created_at":"2025-01-21T22:15:18.796Z","updated_at":"2025-10-07T13:02:28.503Z","avatar_url":"https://github.com/codewithkyle.png","language":"JavaScript","readme":"![Brixi UI - A sleek \u0026 slender design system built on web components.](https://repository-images.githubusercontent.com/271347483/e0cb9434-2f3d-451b-b803-1cf14fa6e05d)\r\n\r\n## Figma\r\n\r\n[Click here](https://www.figma.com/file/mvBHgmtgyS0HdIJo7tsGxQ/Brixi-UI?type=design\u0026mode=design\u0026t=4KvDY1GHhJNstcqf-1) to view the Figma file.\r\n\r\n## Installation\r\n\r\nInstall the NPM packages.\r\n\r\n```\r\nnpm i -D brixi-ui\r\n```\r\n\r\nInstall peer dependencies.\r\n\r\n```\r\nnpm i -D flatpickr@4 fuse.js@6 tooltipper@1 @codewithkyle/notifyjs@3 @codewithkyle/pubsub@1 @codewithkyle/supercomponent@1 @codewithkyle/uuid@1 brixi@latest dayjs@1 lit-html@2\r\n```\r\n\r\nCreate the install scripts.\r\n\r\n```\r\n\"install:ui\": \"install-ui --audio=./public/audio --framework=./src/framework\",\r\n\"install:brixi\": \"brixi\"\r\n```\r\n\r\nInstall UI components.\r\n\r\n```\r\nnpm run install:ui\r\n```\r\n\r\nConfigure Brixi CSS.\r\n\r\n```javascript\r\n// brixi.config.js\r\nmodule.exports = {\r\n    outDir: \"./brixi\",\r\n    important: true,\r\n    output: \"production\",\r\n    colors: {\r\n        white: \"#ffffff\",\r\n        black: \"#000000\",\r\n        \"off-black\": \"#212121\",\r\n        grey: {\r\n            50: \"#FAFAFA\",\r\n            100: \"#F4F4F5\",\r\n            200: \"#E4E4E7\",\r\n            300: \"#D4D4D8\",\r\n            400: \"#A1A1AA\",\r\n            500: \"#71717A\",\r\n            600: \"#52525B\",\r\n            700: \"#3F3F46\",\r\n            800: \"#27272A\",\r\n            900: \"#18181B\",\r\n            950: \"#09090b\",\r\n        },\r\n        primary: {\r\n            50: \"#EFF6FF\",\r\n            100: \"#DBEAFE\",\r\n            200: \"#BFDBFE\",\r\n            300: \"#93C5FD\",\r\n            400: \"#60A5FA\",\r\n            500: \"#3B82F6\",\r\n            600: \"#2563EB\",\r\n            700: \"#1D4ED8\",\r\n            800: \"#1E40AF\",\r\n            900: \"#1E3A8A\",\r\n            950: \"#172554\",\r\n        },\r\n        success: {\r\n            50: \"#ECFDF5\",\r\n            100: \"#D1FAE5\",\r\n            200: \"#A7F3D0\",\r\n            300: \"#6EE7B7\",\r\n            400: \"#34D399\",\r\n            500: \"#10B981\",\r\n            600: \"#059669\",\r\n            700: \"#047857\",\r\n            800: \"#065F46\",\r\n            900: \"#064E3B\",\r\n            950: \"#022c22\",\r\n        },\r\n        danger: {\r\n            50: \"#FFF1F2\",\r\n            100: \"#FFE4E6\",\r\n            200: \"#FECDD3\",\r\n            300: \"#FDA4AF\",\r\n            400: \"#FB7185\",\r\n            500: \"#F43F5E\",\r\n            600: \"#E11D48\",\r\n            700: \"#BE123C\",\r\n            800: \"#9F1239\",\r\n            900: \"#881337\",\r\n            950: \"#4c0519\",\r\n        },\r\n        warning: {\r\n            50: \"#FFFBEB\",\r\n            100: \"#FEF3C7\",\r\n            200: \"#FDE68A\",\r\n            300: \"#FCD34D\",\r\n            400: \"#FBBF24\",\r\n            500: \"#F59E0B\",\r\n            600: \"#D97706\",\r\n            700: \"#B45309\",\r\n            800: \"#92400E\",\r\n            900: \"#78350F\",\r\n            950: \"#451a03\",\r\n        },\r\n    },\r\n    borders: {\r\n        units: \"px\",\r\n        styles: [\"solid\"],\r\n        widths: [1],\r\n        radius: [0.125, 0.25, 0.5],\r\n    },\r\n    variables: {\r\n        \"focus-ring\": \"1px auto var(--primary-500)\",\r\n        \"focus-ring-offset\": \"5px\",\r\n        \"bevel\": \"0 1px 0 hsl(0deg 0% 0% / 0.1)\",\r\n        \"input-border\": \"1px solid var(--grey-300)\",\r\n        \"button-shadow\": \"0px 1px 2px -1px rgba(0, 0, 0, 0.09), inset 0px -1px 0px 1px rgba(0, 0, 0, 0.06)\",\r\n    },\r\n    shadows: {\r\n        colors: {\r\n            black: \"var(--black-hsl)\",\r\n        },\r\n        sizes: {\r\n            sm: `\r\n                0px 1px 2px hsl(var(--shadow-color) / 0.1)\r\n            `,\r\n            md: `\r\n                0px 2px 2px hsl(var(--shadow-color) / 0.1),\r\n                0px 4px 4px hsl(var(--shadow-color) / 0.1),\r\n                0px 6px 6px hsl(var(--shadow-color) / 0.1)\r\n            `,\r\n            lg: `\r\n                0px 2px 2px hsl(var(--shadow-color) / 0.1),\r\n                0px 4px 4px hsl(var(--shadow-color) / 0.1),\r\n                0px 8px 8px hsl(var(--shadow-color) / 0.1),\r\n                0px 16px 16px hsl(var(--shadow-color) / 0.1),\r\n                0px 32px 32px hsl(var(--shadow-color) / 0.1)\r\n            `,\r\n            xl: `\r\n                0px 2px 2px hsl(var(--shadow-color) / 0.1),\r\n                0px 4px 4px hsl(var(--shadow-color) / 0.1),\r\n                0px 8px 8px hsl(var(--shadow-color) / 0.1),\r\n                0px 16px 16px hsl(var(--shadow-color) / 0.1),\r\n                0px 32px 32px hsl(var(--shadow-color) / 0.1),\r\n                0px 48px 48px hsl(var(--shadow-color) / 0.1),\r\n                0px 64px 64px hsl(var(--shadow-color) / 0.1)\r\n            `,\r\n        },\r\n    },\r\n    prefixes: {\r\n        dark: {\r\n            features: [\"backgrounds\", \"fonts\", \"borders\", \"shadows\"],\r\n            rule: \"prefers-color-scheme: dark\",\r\n        },\r\n    },\r\n};\r\n```\r\n\r\nCompile Brixi CSS.\r\n\r\n```\r\nnpm run install:brixi\r\n```\r\n\r\nCreate the TypeScript config.\r\n\r\n```json\r\n{\r\n    \"compilerOptions\": {\r\n        \"target\": \"ES2020\",\r\n        \"lib\": [\"DOM\", \"ES2020\"],\r\n        \"allowJs\": true,\r\n        \"checkJs\": false,\r\n        \"module\": \"ES2020\",\r\n        \"moduleResolution\": \"Node\",\r\n        \"baseUrl\": \"src\",\r\n        \"paths\": {\r\n            \"~brixi/*\": [\"framework/*\"]\r\n        },\r\n        \"declaration\": true,\r\n        \"emitDeclarationOnly\": true,\r\n        \"outDir\": \"_types\"\r\n    },\r\n    \"include\": [\"src\"]\r\n}\r\n```\r\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodewithkyle%2Fbrixi-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodewithkyle%2Fbrixi-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodewithkyle%2Fbrixi-ui/lists"}