Sage ️

Chakra UI is a component system and library for building accessible, high-quality web applications and design systems with React. Designed for developers and modern product teams, it provides reusable interface components and tools that help teams build faster while maintaining a consistent user experience. Chakra UI supports use with Next.js and other modern application frameworks, and its accessibility features are central to its design.

Teams can customise their design systems using semantic tokens for values such as colours and fonts, text styles for typography, and recipes for defining component variants. The library also includes related projects: Ark UI, a headless library for reusable design systems, and Zag.js, which provides UI components powered by finite state machines. For teams seeking a quicker starting point, Chakra offers Chakra UI Pro templates with ready-made components and pages for application, marketing, and ecommerce projects. The site also provides documentation, guides, examples, and community channels to help developers use and extend its tools. Chakra UI is used by teams ranging from startups to established enterprises.