{"id":13591685,"url":"https://github.com/segunadebayo/chakra-ui","last_synced_at":"2025-04-12T18:38:59.366Z","repository":{"id":35045519,"uuid":"190661343","full_name":"segunadebayo/chakra-ui","owner":"segunadebayo","description":"⚡️Simple, Modular \u0026 Accessible UI Components for your React Applications","archived":false,"fork":false,"pushed_at":"2022-12-10T18:28:39.000Z","size":2001,"stargazers_count":485,"open_issues_count":31,"forks_count":20,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-04-03T20:11:19.328Z","etag":null,"topics":["a11y","accessible","chakra","chakra-ui","components","dark-mode","dark-theme","react","react-components","reactjs","uikit","wai-aria"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/segunadebayo.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":"2019-06-06T23:07:21.000Z","updated_at":"2024-11-23T14:54:17.000Z","dependencies_parsed_at":"2023-01-15T12:45:41.612Z","dependency_job_id":null,"html_url":"https://github.com/segunadebayo/chakra-ui","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/segunadebayo%2Fchakra-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/segunadebayo%2Fchakra-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/segunadebayo%2Fchakra-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/segunadebayo%2Fchakra-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/segunadebayo","download_url":"https://codeload.github.com/segunadebayo/chakra-ui/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248616061,"owners_count":21133993,"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":["a11y","accessible","chakra","chakra-ui","components","dark-mode","dark-theme","react","react-components","reactjs","uikit","wai-aria"],"created_at":"2024-08-01T16:01:00.654Z","updated_at":"2025-04-12T18:38:59.339Z","avatar_url":"https://github.com/segunadebayo.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# **Welcome to Chakra UI ⚡️**\n\n- Works out of the box. Chakra UI contains a set of polished React components\n  that work out of the box.\n\n- Flexible \u0026 composable. Chakra UI components are built on top of a React UI\n  Primitive for endless composability.\n\n- Accessible. Chakra UI components follows the WAI-ARIA guidelines\n  specifications.\n\n- Dark Mode 😍: All components are dark mode compatible.\n\n# Installing Chakra UI\n\n⚡️Chakra UI is made up of multiple components and tools which you can import\none by one. All you need to do is install the `chakra-ui` package:\n\n```sh\n$ yarn add chakra-ui\n# or\n$ npm install --save chakra-ui\n```\n\n# Getting set up\n\nTo start using the components, please follow these steps:\n\n1. Wrap your application in a `ThemeProvider` provded by **chakra-ui**\n\n```jsx\nimport { ThemeProvider, ColorModeProvider } from \"fannypack\";\n\nconst App = () =\u003e (\n  \u003cThemeProvider\u003e\n    \u003cColorModeProvider\u003e{/* Your app */}\u003c/ColorModeProvider\u003e\n  \u003c/ThemeProvider\u003e\n);\n```\n\n`ColorModeProvider` is a context that provides light mode and dark mode values\nto the components. It also comes with a function to toggle between light/dark\nmode.\n\n2. Now you can start using components like so!:\n\n```jsx\nimport { Button } from \"chakra-ui\";\n\nconst App = () =\u003e \u003cButton\u003eI just consumed some ⚡️Chakra!\u003c/Button\u003e;\n```\n\n# Contributing\n\nFeel like contributing? That's awesome! We have a\n[contributing guide](./CONTRIBUTING.md) to help guide you.\n\nThe components to be built come the\n[Aria Practices Design Patterns and Widgets](https://www.w3.org/TR/wai-aria-practices-1.1).\n\nHere is a table of the components and their status.\n\n✅ - Released\u003cbr/\u003e ⚠️ - Released but buggy\u003cbr/\u003e 🛠 - Planning to Build\u003cbr/\u003e ❓ -\nMight Build?\n\n| Status | Name                 |\n| ------ | -------------------- |\n| ✅     | Accordion            |\n| ✅     | Alert                |\n| ✅     | Alert Dialog         |\n| ✅     | Breadcrumb           |\n| ✅     | Button               |\n| ✅     | Box                  |\n| ✅     | Checkbox             |\n| 🛠      | Combo Box            |\n| ✅     | Dialog (Modal)       |\n| 🛠      | Disclosure           |\n| ❓     | Feed                 |\n| ✅     | Link                 |\n| 🛠      | Listbox              |\n| 🛠      | Menu or Menu bar     |\n| ✅     | Menu Button          |\n| ✅     | Popover              |\n| ✅     | Pseudo Box           |\n| ✅     | Radio Group          |\n| ⚠️     | Slider               |\n| 🛠      | Slider (Multi-Thumb) |\n| ❓     | Table                |\n| ✅     | Tabs                 |\n| ❓     | Toolbar              |\n| ✅     | Tooltip              |\n| 🛠      | Tree View            |\n| ❓     | Treegrid             |\n| ❓     | Window Splitter      |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsegunadebayo%2Fchakra-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsegunadebayo%2Fchakra-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsegunadebayo%2Fchakra-ui/lists"}