@chakra-ui/react is a popular UI component library for React applications. It provides a set of customizable and accessible components that help developers build beautiful and responsive user interfaces. While @chakra-ui/react offers a comprehensive set of components, there are other UI libraries in the React ecosystem that provide similar functionality. Here are a few alternatives:

• @material-ui/core is a widely-used UI component library for React applications. It offers a rich set of components that follow Material Design guidelines, making it easy to create visually appealing interfaces.
• bootstrap is a front-end framework that provides a collection of CSS and JavaScript components for building responsive and mobile-first websites. It offers a grid system, typography, forms, buttons, and more.
• tailwindcss is a utility-first CSS framework that provides a set of pre-built classes for styling elements. It allows developers to quickly create custom designs without writing CSS from scratch.

To see how @chakra-ui/react compares with @material-ui/core, bootstrap, and tailwindcss, check out this comparison: Comparing @chakra-ui/react vs @material-ui/core vs bootstrap vs tailwindcss.

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:

1. 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.

2. 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!