# Chakra UI — Accessible Component System for React

> Chakra UI is a simple, modular, and accessible component system for building React applications. Every component follows WAI-ARIA guidelines with dark mode support out of the box and a themeable design token system.

## Install

Save the content below to `.claude/skills/` or append to your `CLAUDE.md`:

## Quick Use

```bash
npm i @chakra-ui/react @emotion/react
```

```tsx
import { ChakraProvider, Button, Box, Heading, VStack } from "@chakra-ui/react";

function App() {
  return (
    <ChakraProvider>
      <Box p={8}>
        <VStack spacing={4}>
          <Heading>Welcome</Heading>
          <Button colorScheme="blue">Get Started</Button>
        </VStack>
      </Box>
    </ChakraProvider>
  );
}
```

## Intro

Chakra UI is a simple, modular, and accessible component library for React. Built by Segun Adebayo, it focuses on speed of development and accessibility — every component follows WAI-ARIA standards out of the box. Used by Coinbase, Shopify Hydrogen, and thousands of SaaS products.

- **Repo**: https://github.com/chakra-ui/chakra-ui
- **Stars**: 40K+
- **Language**: TypeScript
- **License**: MIT

## 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

| Library | Styling | Components | Style Props | A11y |
|---|---|---|---|---|
| Chakra UI | Emotion (v2) / Panda (v3) | 60+ | Yes | Excellent |
| MUI | Emotion | 100+ | sx prop | Excellent |
| Mantine | CSS files | 120+ | Limited | Good |
| shadcn/ui | Tailwind | Copy-paste | Utility classes | Good |

## 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

---
Source: https://tokrepo.com/en/workflows/chakra-ui-accessible-component-system-react-4fa5c9c6
Author: AI Open Source