Package Exports

@chakra-ui/react
@chakra-ui/react/dist/index.cjs.js
@chakra-ui/react/dist/index.esm.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@chakra-ui/react) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

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.

Looking for the documentation?

https://chakra-ui.com

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/react package:

$ yarn add @chakra-ui/react
# or
$ npm install --save @chakra-ui/react

Getting set up

To start using the components, please follow these steps:

Wrap your application in a ThemeProvider provided by @chakra-ui/react

import { ThemeProvider, ColorModeProvider } from "@chakra-ui/react"

const App = ({ children }) => (
  <ThemeProvider>
    <ColorModeProvider>{children}</ColorModeProvider>
  </ThemeProvider>
)

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.

Now you can start using components like so!:

import { Button } from "@chakra-ui/react"

const App = () => <Button>I just consumed some ⚡️Chakra!</Button>

Contributing

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

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

Contributors ✨

Thanks goes to these wonderful people (emoji key):

_{Segun Adebayo}
💻 🚧 📖 💡 🎨

_{Tioluwani Kolawole}
📖 💡 🚧

This project follows the all-contributors specification. Contributions of any kind welcome!