Chakra

About Chakra

Chakra UI is a component system for building React web applications and design systems, providing accessible, pre-built UI components (such as sliders, pin inputs, tabs, menus, and switches). It is installed via npm (`@chakra-ui/react`) and works with Next.js, including React Server Components.

The system includes tools for building a design system on top of the base components: semantic design tokens for colors and other design decisions, centralized typography configuration, and a recipe system for defining component variants. It is built by the same team behind Ark UI, a headless component library, and Zag.js, a library of UI components built on finite state machines.

The library reports 7.2 million downloads per month, 40.6 thousand GitHub stars, and 7.7 thousand Discord members. It is used by companies including Vercel, Twilio, and Modulz. A paid offering, Chakra Pro, provides premade templates and components for application, marketing, and e-commerce pages.

Key features

• Accessible React component library for building web apps and design systems
• Built-in dark mode support with consistent focus styling and subtle animations
• Semantic design tokens for streamlining color, spacing, and other design decisions
• Customizable typography via text styles defined in one place
• Component variant recipes for building design system variants
• Works with Next.js RSC and other modern application frameworks

Frequently asked questions