chakra-ui

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";
 
ReactDOM.render(
  <Button>I just consumed some ⚡️Chakra!</Button>,
  document.getElementById("root")
);