Chakra UI
Composable React components with a style props API.
Chakra UI v3 is a design system rather than a component collection. Recipes, slot recipes, design tokens and semantic tokens sit underneath the components, so the visual language is defined once and everything inherits it.
At a glance
| Install | npm install @chakra-ui/react @emotion/react |
| Styling | Emotion, with a token and recipe layer above it |
| Style props | p, bg, rounded and friends, inline in JSX |
| v2 to v3 | a rewrite, not an upgrade |
| MCP server | yes, plus segmented llms.txt files |
| License | MIT |
v3 is a different library
This is the single most important thing to know. Migrating from v2 is not a version bump, and the team publishes a dedicated migration guide for it. Much of the Chakra material online, including AI-generated code, still targets v2 and will not work.
What the code looks like
import { Button, Card, Stack } from "@chakra-ui/react"
<Card.Root p="6" rounded="lg">
<Stack direction="row" gap="3">
<Button colorPalette="teal">Save</Button>
<Button variant="ghost">Cancel</Button>
</Stack>
</Card.Root>
Accessibility as a default, not an option
Focus states, colour contrast and keyboard behaviour are strong out of the box rather than something you enable. That is a large part of why Chakra is recommended for teams without a dedicated accessibility reviewer: the common mistakes are already prevented.
AI tooling
An MCP server is documented with setup for Cursor, VS Code and Claude via mcp.json or a context server entry. Documentation is also published as segmented llms.txt files: complete docs, components, charts, styling, theming, and the v3 migration guide as its own set. Pointing an assistant at the right file is the cleanest way to avoid v2 and v3 confusion.
Choose it if
- You want a token-driven design system rather than a bag of components.
- Your team needs good accessibility defaults without an expert reviewing every PR.
Look elsewhere if
- The Emotion runtime is a constraint. Mantine gives similar breadth on CSS Modules.
- You only want the behaviour or only the styling engine. The same team maintains Ark UI and Panda CSS separately.