Package Exports

@chakra-ui/react
@chakra-ui/react/accordion
@chakra-ui/react/action-bar
@chakra-ui/react/alert
@chakra-ui/react/anatomy
@chakra-ui/react/aspect-ratio
@chakra-ui/react/avatar
@chakra-ui/react/badge
@chakra-ui/react/bleed
@chakra-ui/react/blockquote
@chakra-ui/react/box
@chakra-ui/react/breadcrumb
@chakra-ui/react/button
@chakra-ui/react/card
@chakra-ui/react/center
@chakra-ui/react/checkbox
@chakra-ui/react/checkbox-card
@chakra-ui/react/checkmark
@chakra-ui/react/client-only
@chakra-ui/react/clipboard
@chakra-ui/react/code
@chakra-ui/react/collapsible
@chakra-ui/react/container
@chakra-ui/react/data-list
@chakra-ui/react/dialog
@chakra-ui/react/drawer
@chakra-ui/react/editable
@chakra-ui/react/empty-state
@chakra-ui/react/env
@chakra-ui/react/field
@chakra-ui/react/fieldset
@chakra-ui/react/file-upload
@chakra-ui/react/flex
@chakra-ui/react/float
@chakra-ui/react/for
@chakra-ui/react/format
@chakra-ui/react/grid
@chakra-ui/react/group
@chakra-ui/react/highlight
@chakra-ui/react/hover-card
@chakra-ui/react/icon
@chakra-ui/react/image
@chakra-ui/react/input
@chakra-ui/react/kbd
@chakra-ui/react/link
@chakra-ui/react/list
@chakra-ui/react/locale
@chakra-ui/react/menu
@chakra-ui/react/native-select
@chakra-ui/react/number-input
@chakra-ui/react/package.json
@chakra-ui/react/pagination
@chakra-ui/react/pin-input
@chakra-ui/react/popover
@chakra-ui/react/portal
@chakra-ui/react/preset
@chakra-ui/react/preset-base
@chakra-ui/react/progress
@chakra-ui/react/progress-circle
@chakra-ui/react/radio-card
@chakra-ui/react/radio-group
@chakra-ui/react/radiomark
@chakra-ui/react/rating-group
@chakra-ui/react/segment-group
@chakra-ui/react/select
@chakra-ui/react/separator
@chakra-ui/react/show
@chakra-ui/react/skeleton
@chakra-ui/react/skip-nav
@chakra-ui/react/slider
@chakra-ui/react/spacer
@chakra-ui/react/spinner
@chakra-ui/react/stack
@chakra-ui/react/stat
@chakra-ui/react/status
@chakra-ui/react/steps
@chakra-ui/react/styled-system
@chakra-ui/react/switch
@chakra-ui/react/table
@chakra-ui/react/tabs
@chakra-ui/react/tag
@chakra-ui/react/textarea
@chakra-ui/react/timeline
@chakra-ui/react/toast
@chakra-ui/react/tooltip
@chakra-ui/react/typography
@chakra-ui/react/visually-hidden

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?

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 { ColorModeProvider, ThemeProvider } 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!