Build faster with Premium Chakra UI Components 💎
Learn moreAccessible React components for building high-quality web apps and design systems. Works with Next.js RSC
npm i @chakra-ui/react
Design System
Spend less time writing UI code and more time building a great experience for your customers.
Tokens. Streamline design decisions with semantic tokens
Typography. Customise your font related properties in one place
Recipes. Design components variants with ease
import { defineTokens } from "@chakra-ui/react"
export const tokens = defineTokens({
colors: {
primary: { value: "#0FEE0F" },
secondary: { value: "#EE0F0F" },
},
fonts: {
body: { value: "system-ui, sans-serif" },
},
animations: {
"slide-in-right": { value: "slide-in-right 0.5s ease-in-out" },
},
})
import { defineTextStyles } from "@chakra-ui/react"
export const textStyles = defineTextStyles({
headline: {
value: {
fontSize: "4xl",
fontWeight: "bold",
},
},
subheadline: {
value: {
fontSize: "2xl",
fontWeight: "semibold",
},
},
})
import { defineRecipe } from "@chakra-ui/react"
export const cardRecipe = defineRecipe({
base: {
display: "flex",
flexDirection: "column",
},
variants: {
variant: {
primary: {
bg: "teal.600",
color: "white",
},
},
},
})
2.7M
downloads / month
38.1K
github stars
9K
discord members
Chakra UI is glorious. Dark mode support looks amazing and it is 100% built-in. I love the consistent use of focus styling and the subtle animation. Great care for accessibility throughout. It is a guiding principle of the design system.
Guillermo Rauch
CEO / Vercel
Chakra is a fantastic component library that helps shape and accelerate the work we're doing with Twilio Paste. Thank you @thesegunadebayo!
Aayush Iyer
Engineer / Twillio
Awesome new open-source component library from @thesegunadebayo. Really impressive stuff!
Colm Tuite
CEO / Modulz
Chakra UI has become part of our default stack for React apps, Chakra saves our team tons of time, is well designed and documented, has solid accessibility defaults, and looks great out of the box.
Echobind Engineering
Echobind
Chakra provides a consistent developer experience for most modern frameworks
Ready made templates
Premade components and pages for application, marketing and ecommerce. Beautiful and responsive.
Explore Templates