Chakra UI — Accessible Component System for React

What Chakra UI Does

• 60+ components — Button, Modal, Drawer, Form controls, Menu, Table
• Style props — write CSS inline: <Box p={4} bg="gray.100" rounded="md">
• Theme tokens — space, color, radius, shadow scales
• Dark mode — useColorMode hook, first-class support
• Responsive — <Box w={["100%", "50%", "25%"]}>
• Accessibility — WAI-ARIA compliant
• Framer Motion — animations built in
• Ark UI v3 — new headless foundation

Architecture

v2: Built on Emotion CSS-in-JS with a theme provider. Style props compile to CSS class names at runtime. v3: rewritten on Ark UI (headless primitives) + Panda CSS (zero-runtime CSS) for SSR and performance.

Self-Hosting

Client library.

Key Features

• Style props API (CSS-in-JS inline)
• Responsive arrays for breakpoints
• Dark mode built-in
• Theme tokens system
• Accessibility-first (WAI-ARIA)
• Animation via Framer Motion
• Form validation integrations
• SSR-compatible

Comparison

FAQ

Q: What's the difference between v2 and v3? A: v3 is a major rewrite: built on Ark UI + Panda CSS with zero runtime and faster SSR. The API has breaking changes.

Q: Any performance issues? A: v2's Emotion runtime has a cost on large SSR pages. v3 addresses this by switching to Panda's static CSS.

Q: Can the theme be customized? A: Yes. Extend it with extendTheme({ colors: { brand: {...} } }). Tokens drive all utilities.

Sources & Credits

• Docs: https://chakra-ui.com
• GitHub: https://github.com/chakra-ui/chakra-ui
• License: MIT