@chakra-ui/react

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 { 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!

Similar packages

Other packages similar to @chakra-ui/react

material-ui

Material-UI is a popular React UI framework that implements Google's Material Design. It offers a wide range of components and customization options. Compared to Chakra UI, Material-UI has a more extensive set of components and follows the Material Design guidelines strictly, which might be beneficial for projects that require a Material Design look and feel.

ant-design

Ant Design is a comprehensive UI framework for React that provides a large set of high-quality components and design guidelines. It is widely used in enterprise applications. Compared to Chakra UI, Ant Design offers more components and is more opinionated in terms of design, which can be advantageous for building consistent and feature-rich applications.

semantic-ui-react

Semantic UI React is the official React integration for Semantic UI. It provides a set of components that are easy to use and customize. Compared to Chakra UI, Semantic UI React focuses on providing a semantic and human-friendly HTML structure, which can be useful for developers who prefer a more semantic approach to building UIs.

react-bootstrap

React Bootstrap is a popular UI framework that brings the power of Bootstrap to React. It provides a set of components that are easy to use and integrate with Bootstrap's styles. Compared to Chakra UI, React Bootstrap is more focused on providing Bootstrap-compatible components, which can be beneficial for projects that already use or plan to use Bootstrap.