README

Build Accessible React Apps with Speed ⚡️



  
    
  
  
  
    
  
  
    
  
  
    
  
  
    
  
  
    
  




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]












 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]



 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

 Awesome new open-source component library from @thesegunadebayo. Really
 impressive stuff! –
 Colm Tuite

 This is incredible work. Amazing job Segun! –
 Lee Robinson

 Chakra UI is glorious! I love the consistent use of focus styling and the
 subtle animation –
 Guillermo ▲

 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.


  
    
      
    
    
      Solution Worth Pursuing
      Technology Radar (2020–2021)
    
  
  
    
      
    
    
      The Most Impactful Contribution to the community
      Open Source Awards (2020)
    
  


 License

MIT © Segun Adebayo

Top issues

Discussions

Latest release

Patch Changes

- 10928
  2e78697
  Thanks @waterWang! - - NumberInput: Fix
  NumberInput.Control overflowing into the label when NumberInput.Label is
  used inside NumberInput.Root. The control is now anchored to the bottom of
  the root and sized to the input height.

- 10883
  7c26f1f
  Thanks @kalisaNkevin! - Kbd: Add
  KbdGroup to group the keys of a shortcut. Its size and variant apply to
  every Kbd inside. Single keys like K now render square.

- 2c2fd7c
  Thanks @segunadebayo! - - Checkbox Card,
  Radio Card, Slider: Fix cursor token overrides in the theme being ignored.
  - Theme: Use