- 每周下载量
- 0.0M+
- GitHub Stars
- 0K+
- 组件数量
- 0+
- 当前版本
- v3.36
01 · 核心特性
专注于产品，而非样式细节
Chakra UI 处理好了可访问性、主题化和交互逻辑，你只需要关注业务本身。
无障碍访问
所有组件均遵循 WAI-ARIA 规范，键盘导航与屏幕阅读器开箱即用，并针对常见可访问性问题持续测试。
role="dialog"
aria-checked
Tab ⇥
组合优先
基于复合组件（Compound Components）设计，通过点号语法自由组装每一个部件，拥有无限的组合可能。
<Dialog.Root>
<Dialog.Trigger />
<Dialog.Content />
</Dialog.Root>
可主题化
使用设计令牌（Tokens）、配方（Recipes）和语义化令牌自定义组件的每一处细节，构建属于你的设计系统。
内置深色模式
通过 next-themes 深度集成，深色模式无需额外配置。语义化令牌自动适配当前颜色模式，一套代码两种气质。
开发体验优秀
完整的 TypeScript 类型推导、简洁的样式属性（Style Props），配合 CLI 代码片段让你快速搭建界面。
colorPalette?: "teal" | "cyan" | …
丰富的组件生态
从基础的 Button、Input 到 DatePicker、ColorPicker、QRCode，覆盖真实业务场景所需的全部组件。
02 · 开发体验
简洁直观的 API
使用样式属性（Style Props）直接在组件上编写样式，无需在多个文件间来回切换。所有属性都带有完整的 TypeScript 类型提示。
响应式数组或对象语法，轻松适配多端
colorPalette 一键切换整套配色
复合组件让结构清晰可控
Demo.tsx
import { Button, HStack } from "@chakra-ui/react"
const Demo = () => {
return (
<HStack>
<Button>点击我</Button>
<Button variant="outline">了解更多</Button>
</HStack>
)
}Live Preview