# 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 in your project root:

## 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: v2 vs v3 区别？**
A: v3 大重写：基于 Ark UI + Panda CSS，零运行时、SSR 更快。API 有 breaking changes。

**Q: 性能问题？**
A: v2 的 Emotion 运行时在 SSR 大页面有成本。v3 切换到 Panda 的静态 CSS 解决。

**Q: 能自定义主题？**
A: 能。`extendTheme({ colors: { brand: {...} } })` 扩展。Token 驱动所有 utilities。

## 来源与致谢 Sources

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

---
Source: https://tokrepo.com/en/workflows/4fa5c9c6-3580-11f1-9bc6-00163e2b0d79
Author: AI Open Source