@chakra-ui/react
⚡️ Simple, Modular & Accessible UI Components for your React Applications
Popularity
Downloads/wk
141KGitHub Stars
20.8KMaintenance
Last Commit
5d agoContributors
477Package
Dependencies
47License
Type Definitions
Tree-Shakeable
Categories
React Component Library, React Design SystemReviews
Top Feedback
Readme
Build Accessible React Apps with Speed ⚡️
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
BoxandStackthat 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:
- Wrap your application with the
ChakraProviderprovided 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.
- 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
- JavaScript Starter: https://codesandbox.io/s/chakra-ui-javascript-lzzg9
- TypeScript Starter: https://codesandbox.io/s/chakra-ui-typescript-pomi8
- NextJS TypeScript Starter: https://codesandbox.io/s/chakra-ui-next-js-typescript-kxvyr
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
(emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!
Testing supported by
License
MIT © Segun Adebayo
Rate & Review
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.
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.
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.
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.
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.
