Responsive and accessible React UI components built with React and Emotion


465270.3.93 years ago3 years agoMinified + gzip package size for chakra-ui in KB


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 work in dark mode compatible.

Install and use components

⚡️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

A working version, assuming you are using something like Create React App, might look like this:

import React from "react";
import ReactDOM from "react-dom";
import { Button } from "chakra-ui";

  <Button>I just consumed some ⚡️Chakra!</Button>,

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from