{"id":13449776,"url":"https://github.com/enochndika/kimia-UI","last_synced_at":"2025-03-22T22:33:56.032Z","repository":{"id":41547816,"uuid":"329140702","full_name":"enochndika/kimia-UI","owner":"enochndika","description":"A collection of UI Components  for React built with Tailwind CSS 3","archived":false,"fork":false,"pushed_at":"2022-07-04T18:52:32.000Z","size":7162,"stargazers_count":344,"open_issues_count":2,"forks_count":45,"subscribers_count":9,"default_branch":"main","last_synced_at":"2024-10-11T12:03:11.878Z","etag":null,"topics":["component-library","nextjs","react","tailwind-css","typescript","ui-components"],"latest_commit_sha":null,"homepage":"https://kimia-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/enochndika.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"contributing.md","funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-01-12T23:35:46.000Z","updated_at":"2024-09-10T08:27:56.000Z","dependencies_parsed_at":"2022-09-06T09:41:31.479Z","dependency_job_id":null,"html_url":"https://github.com/enochndika/kimia-UI","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/enochndika%2Fkimia-UI","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/enochndika%2Fkimia-UI/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/enochndika%2Fkimia-UI/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/enochndika%2Fkimia-UI/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/enochndika","download_url":"https://codeload.github.com/enochndika/kimia-UI/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221840730,"owners_count":16889857,"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-library","nextjs","react","tailwind-css","typescript","ui-components"],"created_at":"2024-07-31T06:00:55.844Z","updated_at":"2024-10-28T14:31:57.362Z","avatar_url":"https://github.com/enochndika.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","Running the update"],"sub_categories":["By Popularity"],"readme":"# UI Components for React built with Tailwind CSS 3\n![Kimia-UI](https://res.cloudinary.com/beloved/image/upload/v1618040187/Assets/kimia_lpqdlr.png)\n\n## Why this approach?\n\nTailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces. Il allows you writing your style without leaving your HTML.\n\nThe biggest disadvantage of Tailwind CSS is the risk of having too long classes that will make our code not readable enough.\n\nAs React is component-based, we can extract component logic with its classes and reuse them elsewhere which will result in more readable code with more components and fewer classes.\n\nThat's why I have created this collection of UI components fully customizable. Just copy and paste a component you want to use\n\nAll the components are in the **packages** directory.\n\nEach component contains 2 sub-directories\n* **examples** : contains examples for each variant of the component in TypeScript\n  \n\n* **snippets** : contains examples for each variant  of the component in plain React\n\n\n## 📋 Add a new component\nTo add a new component :\n\nCreate your new directory in **src/packages/{yourComponentName}** Inside your folder, you will create 2 subfolders and one file\n  \n- **examples** : will contains examples for your component in TypeScript**  \n- **snippets** : Will contains examples in plain React and will be used as code snippet to copy\n- **{your component name}.tsx** will contains the logic of your components\n    \n\nCreate your new file(route) in **src/pages/components/{your component name}**. Then you will import all the examples and snippets for your component\n\n\n## Browser Support\n\nThese components are compatible with all browsers\n\n| Chrome | Firefox | Edge | Safari | Opera |\n|:---:|:---:|:---:|:---:|:---:|\n| \u003cimg src=\"https://github.com/creativetimofficial/public-assets/blob/master/logos/chrome-logo.png?raw=true\" width=\"64\" height=\"64\"\u003e | \u003cimg src=\"https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/firefox-logo.png\" width=\"64\" height=\"64\"\u003e | \u003cimg src=\"https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/edge-logo.png\" width=\"64\" height=\"64\"\u003e | \u003cimg src=\"https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/safari-logo.png\" width=\"64\" height=\"64\"\u003e | \u003cimg src=\"https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/opera-logo.png\" width=\"64\" height=\"64\"\u003e |\n\n## Contribution\nIf you would like to contribute on the project, fixing bugs, improve accessibility or open an issue, please follow our [Contribution guide](https://github.com/enochndika/kimia-UI/blob/main/contributing.md)\n\nFirst, run the development server:\n\n```bash\nnpm run dev\n# or\nyarn dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fenochndika%2Fkimia-UI","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fenochndika%2Fkimia-UI","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fenochndika%2Fkimia-UI/lists"}