Need help with chakra-ui?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

segunadebayo
326 Stars 20 Forks 110 Commits 14 Opened issues

Description

⚡️Simple, Modular & Accessible UI Components for your React Applications

Services available

!
?

Need anything else?

Contributors list

# 1,094
HTML
React
a11y
reactjs
91 commits
# 11,627
React
TypeScr...
reactjs
HTML
11 commits

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:
$ 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
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.
  1. Now you can start using components like so!:
import { Button } from "chakra-ui";

const App = () => I just consumed some ⚡️Chakra!;

Contributing

Feel like contributing? That's awesome! We have a contributing guide to help guide you.

The components to be built come the Aria Practices Design Patterns and Widgets.

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 |

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.