{"id":16996257,"url":"https://github.com/fellipeutaka/ui","last_synced_at":"2025-03-23T17:31:15.162Z","repository":{"id":200621994,"uuid":"705982374","full_name":"fellipeutaka/ui","owner":"fellipeutaka","description":"🎨 A Design System with accessible and customizable components powered by shadcn/ui","archived":false,"fork":false,"pushed_at":"2024-02-13T04:18:13.000Z","size":1338,"stargazers_count":23,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-14T18:04:45.510Z","etag":null,"topics":["components","radix-ui","react","shadcn-ui","tailwindcss","ui"],"latest_commit_sha":null,"homepage":"https://fellipeutaka-ui.vercel.app","language":"TypeScript","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/fellipeutaka.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,"publiccode":null,"codemeta":null}},"created_at":"2023-10-17T04:42:48.000Z","updated_at":"2025-01-31T04:13:38.000Z","dependencies_parsed_at":"2024-10-28T16:47:36.924Z","dependency_job_id":"6cf98aaf-ee4f-466a-982f-bc3cbbc4fe86","html_url":"https://github.com/fellipeutaka/ui","commit_stats":null,"previous_names":["fellipeutaka/ui"],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fellipeutaka%2Fui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fellipeutaka%2Fui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fellipeutaka%2Fui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fellipeutaka%2Fui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fellipeutaka","download_url":"https://codeload.github.com/fellipeutaka/ui/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245140946,"owners_count":20567478,"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":["components","radix-ui","react","shadcn-ui","tailwindcss","ui"],"created_at":"2024-10-14T03:51:56.696Z","updated_at":"2025-03-23T17:31:14.217Z","avatar_url":"https://github.com/fellipeutaka.png","language":"TypeScript","funding_links":[],"categories":["Design System","Design Systems \u0026 Kits"],"sub_categories":[],"readme":"# fellipeutaka/ui\n\n## Installation\n\n```bash\npnpm i @fellipeutaka/ui @fellipeutaka/styles lucide-react\n```\n\n\n## Initial configuration\nExtend the Design System theme on `tailwind.config.js`.\n\n```js\nimport { defineTailwindConfig } from \"@fellipeutaka/styles\";\n\nexport default defineTailwindConfig({\n  content: [\"./src/{app,screens,components}/**/*.{ts,tsx}\"],\n});\n```\n\nOr in CJS\n\n```cjs\nconst { defineTailwindConfig } = require(\"@fellipeutaka/styles\");\n\nmodule.exports = defineTailwindConfig({\n  content: [\"./src/{app,screens,components}/**/*.{ts,tsx}\"],\n});\n```\n\nImport `theme.css` file at your `globals.css`.\n\n```css\n/* default theme */\n@import \"@fellipeutaka/styles/theme.css\";\n\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\nGreat! Everything is ready to use it.\n\n```jsx\nimport { Button } from \"@fellipeutaka/ui/button\";\n\nexport function App() {\n  return \u003cButton\u003eHello World!\u003c/Button\u003e;\n}\n```\n\n\n## Customization\n\n\nCustomizing is as simple as changing CSS variables values.\n\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer theme {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 222.2 47.4% 11.2%;\n\n    --muted: 210 40% 96.1%;\n    --muted-foreground: 215.4 16.3% 46.9%;\n\n    --popover: 0 0% 100%;\n    --popover-foreground: 222.2 47.4% 11.2%;\n\n    --border: 214.3 31.8% 91.4%;\n    --input: 214.3 31.8% 91.4%;\n\n    --card: 0 0% 100%;\n    --card-foreground: 222.2 47.4% 11.2%;\n\n    --primary: 222.2 47.4% 11.2%;\n    --primary-foreground: 210 40% 98%;\n\n    --secondary: 210 40% 96.1%;\n    --secondary-foreground: 222.2 47.4% 11.2%;\n\n    --accent: 210 40% 96.1%;\n    --accent-foreground: 222.2 47.4% 11.2%;\n\n    --destructive: 0 100% 50%;\n    --destructive-foreground: 210 40% 98%;\n\n    --ring: 215 20.2% 65.1%;\n\n    --radius: 0.5rem;\n  }\n\n  .dark:root {\n    --background: 224 71% 4%;\n    --foreground: 213 31% 91%;\n\n    --muted: 223 47% 11%;\n    --muted-foreground: 215.4 16.3% 56.9%;\n\n    --accent: 216 34% 17%;\n    --accent-foreground: 210 40% 98%;\n\n    --popover: 224 71% 4%;\n    --popover-foreground: 215 20.2% 65.1%;\n\n    --border: 216 34% 17%;\n    --input: 216 34% 17%;\n\n    --card: 224 71% 4%;\n    --card-foreground: 213 31% 91%;\n\n    --primary: 210 40% 98%;\n    --primary-foreground: 222.2 47.4% 1.2%;\n\n    --secondary: 222.2 47.4% 11.2%;\n    --secondary-foreground: 210 40% 98%;\n\n    --destructive: 0 63% 31%;\n    --destructive-foreground: 210 40% 98%;\n\n    --ring: 216 34% 17%;\n\n    --radius: 0.5rem;\n  }\n\n  body {\n    @apply bg-background text-foreground antialiased;\n    font-feature-settings:\n      \"rlig\" 1,\n      \"calt\" 1;\n  }\n\n  ::-webkit-scrollbar {\n    @apply h-1.5 w-1.5;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    @apply bg-foreground/40 rounded-lg transition-colors;\n  }\n\n  ::-webkit-scdrollbar-thumb:hover,\n  ::-webkit-scrollbar-thumb:active {\n    @apply bg-foreground/60;\n  }\n\n  :autofill {\n    background: none;\n  }\n\n  ::-webkit-color-swatch-wrapper {\n    padding: 0;\n  }\n\n  ::-webkit-color-swatch {\n    border: 0;\n    border-radius: 0;\n  }\n\n  ::-moz-color-swatch,\n  ::-moz-focus-inner {\n    border: 0;\n  }\n\n  ::-moz-focus-inner {\n    padding: 0;\n  }\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffellipeutaka%2Fui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffellipeutaka%2Fui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffellipeutaka%2Fui/lists"}