Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/segunadebayo/chakra-ui
⚡️Simple, Modular & Accessible UI Components for your React Applications
https://github.com/segunadebayo/chakra-ui
a11y accessible chakra chakra-ui components dark-mode dark-theme react react-components reactjs uikit wai-aria
Last synced: 13 days ago
JSON representation
⚡️Simple, Modular & Accessible UI Components for your React Applications
- Host: GitHub
- URL: https://github.com/segunadebayo/chakra-ui
- Owner: segunadebayo
- Created: 2019-06-06T23:07:21.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T18:28:39.000Z (almost 2 years ago)
- Last Synced: 2024-10-22T16:40:06.951Z (20 days ago)
- Topics: a11y, accessible, chakra, chakra-ui, components, dark-mode, dark-theme, react, react-components, reactjs, uikit, wai-aria
- Language: JavaScript
- Homepage:
- Size: 1.91 MB
- Stars: 486
- Watchers: 8
- Forks: 20
- Open Issues: 31
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
Awesome Lists containing this project
README
# **Welcome to Chakra UI ⚡️**
- Works out of the box. Chakra UI contains a set of polished React components
that work out of the box.
- Flexible & composable. Chakra UI components are built on top of a React UI
Primitive for endless composability.
- Accessible. Chakra UI components follows the WAI-ARIA guidelines
specifications.
- Dark Mode 😍: All components are dark mode compatible.
# Installing Chakra UI
⚡️Chakra UI is made up of multiple components and tools which you can import
one by one. All you need to do is install the `chakra-ui` package:
```sh
$ yarn add chakra-ui
# or
$ npm install --save chakra-ui
```
# Getting set up
To start using the components, please follow these steps:
1. Wrap your application in a `ThemeProvider` provded by **chakra-ui**
```jsx
import { ThemeProvider, ColorModeProvider } from "fannypack";
const App = () => (
{/* Your app */}
);
```
`ColorModeProvider` is a context that provides light mode and dark mode values
to the components. It also comes with a function to toggle between light/dark
mode.
2. Now you can start using components like so!:
```jsx
import { Button } from "chakra-ui";
const App = () => I just consumed some ⚡️Chakra!;
```
# Contributing
Feel like contributing? That's awesome! We have a
[contributing guide](./CONTRIBUTING.md) to help guide you.
The components to be built come the
[Aria Practices Design Patterns and Widgets](https://www.w3.org/TR/wai-aria-practices-1.1).
Here is a table of the components and their status.
✅ - Released
⚠️ - Released but buggy
🛠 - Planning to Build
❓ -
Might Build?
| Status | Name |
| ------ | -------------------- |
| ✅ | Accordion |
| ✅ | Alert |
| ✅ | Alert Dialog |
| ✅ | Breadcrumb |
| ✅ | Button |
| ✅ | Box |
| ✅ | Checkbox |
| 🛠 | Combo Box |
| ✅ | Dialog (Modal) |
| 🛠 | Disclosure |
| ❓ | Feed |
| ✅ | Link |
| 🛠 | Listbox |
| 🛠 | Menu or Menu bar |
| ✅ | Menu Button |
| ✅ | Popover |
| ✅ | Pseudo Box |
| ✅ | Radio Group |
| ⚠️ | Slider |
| 🛠 | Slider (Multi-Thumb) |
| ❓ | Table |
| ✅ | Tabs |
| ❓ | Toolbar |
| ✅ | Tooltip |
| 🛠 | Tree View |
| ❓ | Treegrid |
| ❓ | Window Splitter |