[New] Splitter Component
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
Chakra UI is a component library for building web applications.
Tabs
Built for modern product teams.
From next-gen startups to established enterprises.
Build your design system on top of Chakra UI
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" },
},
})
Built for developers By developers
Built for modern product teams.
From next-gen startups to established enterprises.
Top-tier teams use and love Chakra
Sponsored by these amazing companies
Works with your favorite application framework
Chakra provides a consistent developer experience for most modern frameworks
Build even faster with Chakra Pro 💎
Premade components and pages for application, marketing and ecommerce. Beautiful and responsive.
Explore Templates