{"id":15769655,"url":"https://github.com/halvaradop/ui","last_synced_at":"2025-04-21T04:31:26.909Z","repository":{"id":256821286,"uuid":"856525123","full_name":"halvaradop/ui","owner":"halvaradop","description":"A collection of reusable components for React, styled with Tailwind CSS. It simplifies the development of modern and responsive interfaces.","archived":false,"fork":false,"pushed_at":"2024-10-29T13:14:54.000Z","size":386,"stargazers_count":1,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-10-29T15:57:51.141Z","etag":null,"topics":["pnpm","postcss","react","storybook","tailwindcss","ui","ui-library"],"latest_commit_sha":null,"homepage":"","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/halvaradop.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":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-09-12T18:10:46.000Z","updated_at":"2024-10-29T13:13:10.000Z","dependencies_parsed_at":"2024-09-13T07:59:30.047Z","dependency_job_id":"412bced2-bee5-475b-ac12-d2457d031886","html_url":"https://github.com/halvaradop/ui","commit_stats":{"total_commits":39,"total_committers":1,"mean_commits":39.0,"dds":0.0,"last_synced_commit":"d32de4944931b17fe5075f8d23f17d4f2b3481ad"},"previous_names":["halvaradop/ui"],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/halvaradop%2Fui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/halvaradop%2Fui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/halvaradop%2Fui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/halvaradop%2Fui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/halvaradop","download_url":"https://codeload.github.com/halvaradop/ui/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223849431,"owners_count":17213640,"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":["pnpm","postcss","react","storybook","tailwindcss","ui","ui-library"],"created_at":"2024-10-04T14:03:47.983Z","updated_at":"2025-04-21T04:31:26.903Z","avatar_url":"https://github.com/halvaradop.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @halvaradop/ui\n\nThis is a library of accessible, reusable, and customizable UI components for web applications built with React and styled using TailwindCSS. It provides a set of pre-styled components designed to streamline and accelerate the development of user interfaces.\n\n## Version Compatibility\n\nThis library supports both `React 18` and `React 19`. Refer to the table below to select the appropriate version of the library based on your React version:\n\n| React version | Library version            |\n| ------------- | -------------------------- |\n| React 18      | Latest version ^x.y.z      |\n| React 19      | Beta version ^x.y.z-beta.n |\n\n## Installation\n\nTo install the available components, you can refer to the [packages](https://github.com/halvaradop/ui/tree/master/packages) and add the package name with the `@halvaradop` prefix. Then, run one of the following commands based on your package manager and the React version you are using:\n\n### For React 18\n\nInstall the stable version:\n\n```bash\nnpm install @halvaradop/ui-component\nyarn add @halvaradop/ui-component\npnpm add @halvaradop/ui-component\n```\n\n### For React 19\n\nInstall the beta version:\n\n```bash\nnpm install @halvaradop/ui-component@beta\nyarn add @halvaradop/ui-component@beta\npnpm add @halvaradop/ui-component@beta\n```\n\n## Usage\n\nImport components and start building your application:\n\n```tsx\nimport { Button } from \"@halvaradop/ui-button\"\n\nexport default function App() {\n  return \u003cButton variant=\"outline\"\u003eClick Me\u003c/Button\u003e\n}\n```\n\nCheck the full list of components in the [packages directory](https://github.com/halvaradop/ui/tree/master/packages).\n\n## Styles\n\nTo add styles from the library to any of the components in your project, you need to add the pattern `\"./node_modules/@halvaradop/ui-*/**/*.{js,ts,jsx,tsx,mdx}\"` within the `tailwind.config.ts` file. This will allow TailwindCSS to recognize the classes used in the library and apply the styles to the components.\n\n```ts\nimport type { Config } from \"tailwindcss\"\n\nconst config: Config = {\n  content: [\"./node_modules/@halvaradop/ui-*/**/*.{js,ts,jsx,tsx,mdx}\"],\n  darkMode: \"class\",\n  future: {\n    hoverOnlyWhenSupported: true,\n  },\n}\n\nexport default config\n```\n\n### Customizing with CSS Variables\n\nThe components support CSS variables to customize your components based on your application's design system. To set the CSS variables, define the required variables in your project's `.css` file. Then, extend the `colors` field in the `tailwind.config.ts` file to create new color names using the values of the previously defined CSS variables.\n\nBelow are some of the CSS variables used by the components of the `@halvaradop/ui` library. For a complete list of CSS variables, refer to the [index.css](https://github.com/halvaradop/ui/blob/master/index.css) file:\n\n```css\n/* Default color scheme for light theme */\n:root {\n  /* Primary colors */\n  --color-primary: oklch(13% 0 100);\n  --color-primary-hover: oklch(28% 0 100);\n\n  /* Secondary colors */\n  --color-secondary: oklch(92% 0 0);\n  --color-secondary-hover: oklch(95% 0 0);\n\n  /* Red color */\n  --color-red: oklch(67% 0.2343 13);\n  --color-red-hover: oklch(81% 0.2343 13);\n\n  /* Blue color */\n  --color-blue: oklch(62% 0.22 250);\n  --color-blue-hover: oklch(76% 0.22 250);\n\n  /* Green color */\n  --color-green: oklch(86% 0.32 147);\n  --color-green-hover: oklch(100% 0.32 147);\n\n  /* Yellow color */\n  --color-yellow: oklch(87% 0.2 90);\n  --color-yellow-hover: oklch(100% 0.2 90);\n\n  /* Text colors */\n  --color-font-100: oklch(96% 0 360);\n  --color-font-200: oklch(13% 0 100);\n\n  /* Ghost color used by the Button component */\n  --color-ghost: oklch(92% 0 0);\n\n  /* Input colors */\n  --color-input: oklch(13% 0 100);\n  --color-input-background: oklch(99% 0 0);\n\n  /* Color for components with the disabled HTML attribute */\n  --color-disabled: oklch(92% 0 0);\n\n  /* Modal colors */\n  --color-modal: oklch(99.7% 0.001 360);\n  --color-dialog: oklch(75.51% 0.001 360 / 50.27%);\n\n  /* Border colors */\n  --color-border: oklch(93.55% 0.001 360);\n}\n```\n\n### Multi-Theming Support\n\nThe library supports only the `Dark Theme`. To update the CSS variables based on the dark theme, use the following code:\n\n```css\n/* Dark theme color scheme */\n:is(html, body).dark {\n  /* Primary colors in dark theme */\n  --color-primary: oklch(92% 0 0);\n  --color-primary-hover: oklch(95% 0 0);\n\n  /* Secondary colors in dark theme */\n  --color-secondary: oklch(13% 0 100);\n  --color-secondary-hover: oklch(28% 0 100);\n\n  /* Text colors in dark theme */\n  --color-font-100: oklch(13% 0 100);\n  --color-font-200: oklch(96% 0 360);\n\n  /* Input colors in dark theme */\n  --color-input: oklch(92% 0 0);\n  --color-input-background: oklch(13% 0 100);\n}\n```\n\n### Integrating CSS Variables with TailwindCSS Configuration\n\nAfter defining the colors for your project using your design system or the default styles provided by the library, the next step is to create new color references using the CSS variables. The following code snippet demonstrates how to create some colors using these CSS variables. For more details, refer to the [tailwind.config.ts](https://github.com/halvaradop/ui/blob/master/tailwind.config.ts) file.\n\n```ts\nimport type { Config } from \"tailwindcss\"s\n\nconst config: Config = {\n  content: [\"./node_modules/@halvaradop/ui-*/**/*.{js,ts,jsx,tsx,mdx}\"],\n  darkMode: \"class\",\n  future: {\n    hoverOnlyWhenSupported: true,\n  },\n  theme: {\n    extend: {\n      colors: {\n        primary: {\n          DEFAULT: \"var(--color-primary)\",\n          hover: \"var(--color-primary-hover)\",\n        },\n        secondary: {\n          DEFAULT: \"var(--color-secondary)\",\n          hover: \"var(--color-secondary-hover)\",\n        },\n        color: {\n          100: \"var(--color-font-100)\",\n          200: \"var(--color-font-200)\",\n        },\n        input: {\n          DEFAULT: \"var(--color-input)\",\n          background: \"var(--color-input-background)\",\n        },\n      },\n    },\n  },\n}\n\nexport default config\n```\n\n## Notes\n\nThe beta version works, however, it may have minor changes or issues compared to the stable version. If you find a problem or issue, please report it in an [Issue](https://github.com/halvaradop/ui/issues) with the details.\n\n## Contributing\n\nWe welcome contributions to the `@halvaradop/ui` library. If you have an idea, find an issue, or have any advice, please feel free to open an issue or create a pull request. We offer a guide on how to contribute to the project and the necessary steps to do so. Please read [Contributing Guide](https://github.com/halvaradop/ui/blob/master/.github/CONTRIBUTING.md).\n\n# Code Of Conduct\n\nPlease be aware that this project has a code of conduct, and we expect all contributors to follow these guidelines in their interactions. For more information, please read our [Code of Conduct](https://github.com/halvaradop/.github/blob/master/.github/CODE_OF_CONDUCT.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhalvaradop%2Fui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhalvaradop%2Fui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhalvaradop%2Fui/lists"}