---
slug: "chakra-ui"
source_type: "readme"
source_url: "https://cdn.jsdelivr.net/gh/chakra-ui/chakra-ui@main/README.md"
repo: "https://github.com/chakra-ui/chakra-ui"
source_file: "README.md"
branch: "main"
---
<p align="center">
  <a href="https://github.com/chakra-ui/chakra-ui">
    <picture>
      <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/chakra-ui/chakra-ui/main/media/logo-colored-white@2x.png?raw=true">
      <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/chakra-ui/chakra-ui/main/media/logo-colored@2x.png?raw=true">
      <img src="https://raw.githubusercontent.com/chakra-ui/chakra-ui/main/media/logo-colored@2x.png?raw=true" alt="Chakra logo" width="300" />
    </picture>
  </a>
</p>

<h1 align="center">Build Accessible React Apps with Speed ⚡️</h1>
<br />

<p align="center">
  <a href="cursor://anysphere.cursor-deeplink/mcp/install?name=chakra-ui&amp;config=eyJjb21tYW5kIjoibnB4IC15IEBjaGFrcmEtdWkvcmVhY3QtbWNwIn0%3D" target="_blank" rel="noreferrer">
    <img alt="Add MCP server to Cursor" height="20" src="https://cursor.com/deeplink/mcp-install-light.svg" />
  </a>
  <img alt="Github Checks" src="https://img.shields.io/github/checks-status/chakra-ui/chakra-ui/main"/>
  <a href="https://github.com/chakra-ui/chakra-ui/blob/main/LICENSE">
    <img alt="MIT License" src="https://img.shields.io/github/license/chakra-ui/chakra-ui"/>
  </a>
  <a href="https://www.npmjs.com/package/@chakra-ui/react">
    <img alt="NPM Downloads" src="https://img.shields.io/npm/dm/@chakra-ui/react.svg?style=flat"/>
  </a>
  <a href="https://www.npmjs.com/package/@chakra-ui/react">
    <img alt="NPM Version" src="https://img.shields.io/npm/v/@chakra-ui/react?style=flat-square&color=43cc11">
  </a>
  <a href="https://github.com/chakra-ui/chakra-ui">
    <img alt="Github Stars" src="https://img.shields.io/github/stars/chakra-ui/chakra-ui?style=social" />
  </a>
  <a href="https://discord.gg/chakra-ui">
    <img alt="Discord" src="https://img.shields.io/discord/660863154703695893.svg?label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2" />
  </a>
</p>

<br />

Chakra UI is a component system for building products with speed. Accessible
React components for building high-quality web apps and design systems. Works
with Next.js RSC

## Documentation

It's the https://chakra-ui.com website for the latest version of Chakra UI.

- Latest: https://chakra-ui.com
- v2: https://v2.chakra-ui.com
- v1: https://v1.chakra-ui.com
- v0: https://v0.chakra-ui.com

## Installation

To use Chakra UI components, all you need to do is install the
`@chakra-ui/react` package and its peer dependencies:

```sh
# with Yarn
$ yarn add @chakra-ui/react @emotion/react

# with npm
$ npm i @chakra-ui/react @emotion/react

# with pnpm
$ pnpm add @chakra-ui/react @emotion/react

# with Bun
$ bun add @chakra-ui/react @emotion/react
```

## Usage

Read the docs here: https://www.chakra-ui.com/docs/get-started/installation

## Contributing

Read the contribution guide here:
https://www.chakra-ui.com/docs/get-started/contributing

## Support Chakra UI

### Organizations

Support this project with your organization. Your logo will show up here with a
link to your website.
[[Contribute](https://opencollective.com/chakra-ui/contribute)]

<a href="https://opencollective.com/chakra-ui/organization/0/website"><img src="https://opencollective.com/chakra-ui/organization/0/avatar.svg?avatarHeight=130" /></a>
<a href="https://opencollective.com/chakra-ui/organization/1/website"><img src="https://opencollective.com/chakra-ui/organization/1/avatar.svg?avatarHeight=130" /></a>
<a href="https://opencollective.com/chakra-ui/organization/2/website"><img src="https://opencollective.com/chakra-ui/organization/2/avatar.svg?avatarHeight=130" /></a>
<a href="https://opencollective.com/chakra-ui/organization/3/website"><img src="https://opencollective.com/chakra-ui/organization/3/avatar.svg?avatarHeight=130" /></a>
<a href="https://opencollective.com/chakra-ui/organization/4/website"><img src="https://opencollective.com/chakra-ui/organization/4/avatar.svg?avatarHeight=130" /></a>
<a href="https://opencollective.com/chakra-ui/organization/5/website"><img src="https://opencollective.com/chakra-ui/organization/5/avatar.svg?avatarHeight=130" /></a>
<a href="https://opencollective.com/chakra-ui/organization/6/website"><img src="https://opencollective.com/chakra-ui/organization/6/avatar.svg?avatarHeight=130" /></a>
<a href="https://opencollective.com/chakra-ui/organization/7/website"><img src="https://opencollective.com/chakra-ui/organization/7/avatar.svg?avatarHeight=130" /></a>
<a href="https://opencollective.com/chakra-ui/organization/8/website"><img src="https://opencollective.com/chakra-ui/organization/8/avatar.svg?avatarHeight=130" /></a>
<a href="https://opencollective.com/chakra-ui/organization/9/website"><img src="https://opencollective.com/chakra-ui/organization/9/avatar.svg?avatarHeight=130" /></a>

### Individuals

By donating \$5 or more you can support the ongoing development of this project.
We'll appreciate some support. Thank you to all our supporters! 🙏
[[Contribute](https://opencollective.com/chakra-ui/contribute)]

<a href="https://opencollective.com/chakra-ui"><img src="https://opencollective.com/chakra-ui/individuals.svg?width=890" /></a>

## Testimonials

> People throw React component libraries and design systems at me regularly.
> This might be the best one I've seen. The APIs are simple but composable and
> the accessibility on the couple components I looked is complete.
>
> Great work @thesegunadebayo, really inspiring work. –
> [Ryan Florence](https://twitter.com/ryanflorence)

> Awesome new open-source component library from @thesegunadebayo. Really
> impressive stuff! –
> [Colm Tuite](https://twitter.com/colmtuite/status/1169622886052782081)

> This is incredible work. Amazing job Segun! –
> [Lee Robinson](https://twitter.com/leeerob/status/1169330130361159682)

> Chakra UI is glorious! I love the consistent use of focus styling and the
> subtle animation –
> [Guillermo ▲](https://twitter.com/rauchg/status/1169632334389248000)

## Awards and Mentions

We've been extremely humbled to receive awards and mentions from the community
for all the innovation and reach Chakra UI brings to the JavaScript ecosystem.

<table>
  <tr valign="middle">
    <td width="124">
      <img src="https://raw.githubusercontent.com/chakra-ui/chakra-ui/main/media/tech-radar.png" width="124" alt="Technology Radar" />
    </td>
    <td>
      <h4>Solution Worth Pursuing</h4>
      <p><em><a href="https://www.thoughtworks.com/radar/languages-and-frameworks/chakra-ui">Technology Radar</a> (2020–2021)</em></p>
    </td>
  </tr>
  <tr>
    <td width="124">
      <img src="https://raw.githubusercontent.com/chakra-ui/chakra-ui/main/media/os-awards.png" width="124" alt="Open Source Awards 2020" />
    </td>
    <td>
      <h4>The Most Impactful Contribution to the community</h4>
      <p><em><a href="https://osawards.com/react/2020">Open Source Awards</a> (2020)</em></p>
    </td>
  </tr>
</table>

## License

MIT © [Segun Adebayo](https://github.com/segunadebayo)