@chakra-ui/react

⚡️ Simple, Modular & Accessible UI Components for your React Applications

Showing:

Popularity

Downloads/wk

141K

GitHub Stars

20.8K

Maintenance

Last Commit

5d ago

Contributors

477

Package

Dependencies

47

License

MIT

Type Definitions

Built-In

Tree-Shakeable

Yes?

Reviews

Average Rating

4.6/518
Read All Reviews
s-r-aman
abhinavdc
shamin
parimalyeole1
ashikmeerankutty
ksorv
developerspot20

Top Feedback

15Great Documentation
15Easy to Use
13Bleeding Edge
9Highly Customizable
9Responsive Maintainers
6Performant

Readme

Chakra logo

Build Accessible React Apps with Speed ⚡️


Bundle Size Language grade: JavaScript MIT License NPM Downloads Github Stars Discord


Chakra UI provides a set of accessible, reusable, and composable React components that make it super easy to create websites and apps.

Looking for the documentation? 📝

For older versions, head over here => https://v0.chakra-ui.com

Latest version (v1) => https://chakra-ui.com

Features 🚀

  • Ease of Styling: Chakra UI contains a set of layout components like Box and Stack that make it easy to style your components by passing props. Learn more
  • Flexible & composable: Chakra UI components are built on top of a React UI Primitive for endless composability.
  • Accessible. Chakra UI components follow the WAI-ARIA guidelines specifications and have the right aria-* attributes.
  • Dark Mode 😍: Most components in Chakra UI are dark mode compatible.

Support Chakra UI 💖

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]

Individuals

Organizations

Support this project with your organization. Your logo will show up here with a link to your website. [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 ▲

Installing Chakra UI

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

$ yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4

# or

$ npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4

Usage

To start using the components, please follow these steps:

  1. Wrap your application with the ChakraProvider provided by @chakra-ui/react.
import { ChakraProvider } from "@chakra-ui/react"

// Do this at the root of your application
function App({ children }) {
  return <ChakraProvider>{children}</ChakraProvider>
}

Optionally, you can wrap your application with the ColorModeProvider so you can toggle between light and dark mode within your app.

  1. Now you can start using components like so!:
import { Button } from "@chakra-ui/react"

function Example() {
  return <Button>I just consumed some ⚡️Chakra!</Button>
}

CodeSandbox Templates

create-react-app Templates

Check out our guide for information on how to use our official create-react-app templates.

Contributing

Feel like contributing? That's awesome! We have a contributing guide to help guide you.

Contributors ✨

Thanks goes to these wonderful people


Segun Adebayo

💻 🚧 📖 💡 🎨

Tioluwani Kolawole

📖 💡 🚧

Devansh Jethmalani

💻

Adrian Aleixandre

💻 📖

Lee

📖

Kristóf Poduszló

💻 🤔 🐛 📖

Justin Hall

💻

Mark Chandler

💻 ⚠️ 📖 🚧

Folasade Agbaje

💻 🤔

Christian Nwamba

📖

Jonathan Bakebwa

📖 🤔

Alex Luong

💻 🔌

Jesco Wüster

💻

Dusty Doris

💻

Alex Lobera

💻

Tommaso De Rossi

💻

Odi

💻

Hendrik Niemann

💻

Matt Rothenberg

💻 💡

Luis Felipe Zaguini

💻

Jean

💻

Temitope Ajiboye

📖

Jonathan Kim

💻

Chris Thompson

💻

WALTER KIMARO

💻

Jack Leslie

💻

Ken-Lauren Daganio

💻

Ramon

💻

jess

📖 🔍

Ayelegun Kayode Michael

💻

Tal Williams

💻

Trevor Blades

💻 📖 🐛

Gord Lea

💻

Aggelos Arvanitakis

💻

Douglas Gabriel

💻

Martin Nordström

💻

Danny Tatom

💻

Simon Collins

💻

Santi Albo

💻 📖

PILO7980

💻

Ishimoto Koji

💻

Jeff Wen

💻

Pablo Saez

💻

Nejc Ravnik

💻

Julien Viala

💻

Sebastian Trebunak

💻 📖

Adam Plante

💻

Lúcio Rubens

💻

Jason Miazga

💻 📖

Gonzalo Pozzo

💻

Christian

💻 🚇

Christian Hagendorn

💻

Andrey Krasnov

💻

Dony Sukardi

💻

Meng

💻

Gabriele Belluardo

💻

Francois Best

💻

Tianci He

💻

Steven

💻

Baptiste Adrien

💻

Rob Bevan

💻

Tomasz

💻

徐愷

💻

David Wippel

💻

Naveen

💻

Vincent

💻

Osamah Aldoaiss

💻

Fred K. Schott

💻

Jared Palmer

💻

Austin Walela

💻

Tony Narlock

💻 📖

Thomas Maximini

💻

David Baumgold

💻

ralphilius

💻

Rahul Rangnekar

💻

Pierre Nel

💻

Pierre Grimaud

💻

Whisp R&D

💻

Makenna Smutz

💻 📖 🤔

Nelson Reitz

💻

Mohamed Nainar

📖

Mustafa Turhan

📖

Kim Røen

📖

Justin Mak

💻

Jeremy Davis

💻

Jeremy Lu

📖 💻

Ivan Dalmet

📖 💻 🔌

Dillon Curry

💻

idfunctor

💻

denkigai

💻

Aaron Adams

💻

Abdulazeez Adeshina

💻

Sandro

💻

Premkumar Shanmugam

💻

Tobias Meixner

💻

Jeremie Leblanc

💻

Kelvin Oghenerhoro

💻

David J. Felix

💻

Brody McKee

📖

Per Svensson

💻

Patrick Cason

📖

Ivo Ilić

💻

Avaneesh Tripathi

💻

balibebas

📖

Navin Moorthy

💻 📖

Tim Kindberg

📖

iodar

📖

MAO YUFENG

📖

Peng Jie

💻 📖

James Gee

💻 ⚠️ 💡

Anton

📖

Damnjan Lukovic

📖

Stanila Andrei

💻

Ekunola Ezekiel

💻

Ben Mitchinson

📖

Jess Telford

💻

Simo Aleksandrov

📖

Héricles Emanuel

💻

CodinCat

📖

Sam Dawson

🤔

hy2k

💻

Pierre Ortega

💻

Kerem Sevencan

📖

harveyhalwin

📖

Mansour benyoucef

📖

Andrew Garrison

📖

Carlos Rodrigues

📖

Dwight Watson

📖

ChasinHues

📖

Nahuel Greco

📆 🐛

Pablo Rocha

📖

Dustin Larimer

💻 🎨

Juliano Farias

📖

Joe Bell

🐛 💻

Henning Pohlmeyer

💻

Sivert Schou Olsen

📖

Andrei Lazarescu

📖

José Teixeira

🐛

Adriano Resende

📖

Victor Bastos

📖

Vincent

📖

Candice

🎨 🐛 📖

Dave Bauman

📖

TimKolberger

🐛 📖 💻

Stephane Mensah

🐛

iskanderbroere

📖

Dominik Sumer

💻

Pavel 'Strajk' Dolecek

📖

Keshav Bohra

📖

okezieuc

📖

Clayton Faria

📖

Andrew Ellis

💻 🐛 📖

Joel Gallant

🐛

Jaya Krishna Namburu

💻

Ifeoma Imoh

📖

Jason Adkison

🐛

Gauthier Rodaro

🐛

Tom Dohnal

💻

Sam Margalit

🐛

Marcus Wood

💻

Spencer Duball

📖

Jacob Arriola

📖

Kenley Jean

📖

Dennis Morello

🐛

Umar Gora

📖

Zyclotrop-j

💻

Hong Suk Woo

📖

Junho Yeo

📖

Thomas Siller

⚠️ 💻

Samuel Kauffmann

📖

Jozef Mikuláš

💻

João Victor

💻

yuichiro miyamae

📖

Gifa Eriyanto

🐛

Yuzi

⚠️ 💻

songheewon

📖

Prasanna Venkatesh T S

📖

anthowm

📖

Osama Ahmaro

🐛

Danan Wijaya

📖

electather

🐛

Shubham Kaushal

📖

Petter Sæther Moen

📖

Herman Nygaard

📖

jnmsl

📖

Mohamed Sayed

💻

Sam Poder

📖

Dominic Lee

📖 💻

Feras Aloudah

🤔

JP Ungaretti

📖

Endika Intxaurtieta

📖

Matt Wells

💻

Anant Jain

📖

Tom Chen

📖 🚇

Ernie Miranda

📖

bjoluc

📖

Sujit Pradhan

📖 💻

Abhishek Kashyap

📖

Kristian Djaković

💻

Antoniel Magalhães

💻

Griko Nibras

🤔 💻

imalbert

📖

mcha

💻 ⚠️

Hasib Hassan

📖

Jamie Rolfs

🤔 📖 💻

Surabhi Gupta

📖

Ningaro

🐛

Monae

💻

Wade McDaniel

📖

Gordon Goldbach

💻

Bhish

💻

Amilkar Munoz

📖

Samar Mohan

💻

João Paulo Rodrigues

📖

Avery Freeman

📖

Daniel Schulz

🐛 💻 📖 🤔

(emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!

Testing supported by

BrowserStack

License

MIT © Segun Adebayo

Rate & Review

Great Documentation15
Easy to Use15
Performant6
Highly Customizable9
Bleeding Edge13
Responsive Maintainers9
Poor Documentation1
Hard to Use0
Slow0
Buggy1
Abandoned0
Unwelcoming Community0
100
SR AmanNew Delhi, India88 Ratings93 Reviews
Trying new things.
2 months ago
Great Documentation
Bleeding Edge
Easy to Use
Highly Customizable
Responsive Maintainers
Performant

I have never liked any kind of component library, but this one is diffferent. It has such an intuitive approach to building, It makes it so easy and fast build apps. I am in love with chakra, also the settings to change default behaviour is nice. But the library is also not that large, I mean components are limited but the usablility is just beyond amazing.


1
Yogi-Kmr
Abhinav Dinesh CKochi30 Ratings29 Reviews
Front End Engineer | JavaScript, Angular, React
1 month ago
Easy to Use
Performant
Highly Customizable
Buggy
Bleeding Edge
Responsive Maintainers
Great Documentation
Poor Documentation

I have used many UI libraries and Chakra UI would stand out from the rest due to it's customisability, ease of use, accessibility support and typescript integration. Since it's a fairly new library this isn't feature rich or exhaustive as some of the other UI libraries available but for most normal scenarios Chakra will suffice. Being able to use tailwind inspired style properties on all the Chakra components is what makes it so easy to use. This applies to every single component in chakra and so it's highly flexible. I have run into certain bugs in the library and also the documentation isn't as good as you would expect from a library of these many features. There aren't many third part tutorials as well that explore the advanced features available in the library. Which I can forgive due to the library being comparatively new.


0
ShaminKochi, Kerala51 Ratings50 Reviews
Full stack engineer & open source enthusiast
5 months ago
Great Documentation
Easy to Use
Highly Customizable
Bleeding Edge
Responsive Maintainers

Chakra is one of the very few component libraries I like. I use this in most the newer projects I work on. The library is entirely written in typescript and supports hooks very well. The project is fairly new so it does provide a lot of newer features in react and typescript. It is accessible and is a goto if you care about accessibility in your project. Chakra helps you build accessible frontends. The theming in chakra is good but I find it hard to customize. There are a lot of customisation chakra provides, but there is no proper documentation to customize it. It is a part which they can improve. Apart from that chakra has an amazing documentation and very good maintainers.


0
Parimal YeolePune73 Ratings81 Reviews
Lang :Node[TS,JS] | Dart | Go | Haskell DB: Mongo | Postgres | Redis | DynamoDb | ElasticSearch Acrhitecture: Micro-service | Serverless AWS Certified
6 months ago
Bleeding Edge
Highly Customizable

One of the best libraries for creating quality Components for react apps I've used this library in my couple of projects for creating UI components and this works fine for me. I get amazing performance and using this library I build my web app in less time. my experience with this app is really amazing and chakra UI components are soo responsive for every single device . and work amazing, best and easy to use libraries for react apps with great , clean and up to dated documentation.


0
Ashik MeerankuttyIdukki, Kerala68 Ratings72 Reviews
5 months ago
Bleeding Edge
Great Documentation
Easy to Use
Responsive Maintainers

Chakra UI is the best react component library I ever used. It has every component that you ever need to create any web apps. All chakra components are following accessibility guidelines which is great. Most component libraries do not come with a focus on accessibility so it creates issues when you are trying to make your app completely accessible. Although chakra components are great they are using popper js and framer-motion for popovers which can increase your bundle size.


0

Alternatives

tabler-reactReact components and demo for the Tabler UI theme.
User Rating
4.2/ 5
6
Top Feedback
3Easy to Use
1Performant
1Slow
GitHub Stars
2K
Weekly Downloads
2K
@material-ui/labMaterial-UI is a simple and customizable component library to build faster, beautiful, and more accessible React applications. Follow your own design system, or start with Material Design.
User Rating
4.7/ 5
11
Top Feedback
8Easy to Use
7Great Documentation
5Performant
GitHub Stars
72K
Weekly Downloads
1M
react-bootstrapBootstrap components built with React
User Rating
4.4/ 5
72
Top Feedback
15Easy to Use
14Great Documentation
8Performant
GitHub Stars
20K
Weekly Downloads
863K
reactstrapSimple React Bootstrap 4 components
User Rating
4.8/ 5
20
Top Feedback
6Great Documentation
6Easy to Use
4Responsive Maintainers
GitHub Stars
10K
Weekly Downloads
465K
@coreui/reactCoreUI React.js UI Components. CoreUI for React.js replaces and extends the Bootstrap javascript. Components have been built from scratch as true React.js hook components, without jQuery and unneeded dependencies.
User Rating
5.0/ 5
1
Top Feedback
1Easy to Use
1Performant
1Highly Customizable
GitHub Stars
291
Weekly Downloads
15K
See 30 Alternatives