chakra-ui

by segunadebayo

segunadebayo / chakra-ui

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

191 Stars 8 Forks Last release: Not found 110 Commits 12 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

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.