Chakra UI：40K Star 的 React 组件库，开箱即用的无障碍 UI 方案

Chakra UI 在 GitHub 上拿到了 40,436 个 Star。

这是一个 React 组件系统，目标明确：让你快速构建可访问的 Web 应用。不搞花哨的东西，给的是一套可组合、主题化、遵循 WAI-ARIA 标准的组件。

1、 它解决什么问题

做过中后台的前端大概都经历过这个流程：选一个 UI 框架，样式不好改，换一个，组件不全，再换一个，无障碍支持基本为零。来回折腾下来，写业务代码的时间还不如调样式多。

Chakra UI 的做法是提供一套拿来就能用的组件，每个组件都内置了键盘导航、屏幕阅读器支持、焦点管理这些无障碍能力。你不用自己去处理 ARIA 属性，组件层面已经做好了。

同时，它基于 Emotion 做样式方案，所有组件都支持主题定制。颜色、字体、间距、断点，通过一个 theme 对象就能全局调整。默认主题也够用，不改也行。

2、 安装和使用

装起来很简单：

# npm
npm i @chakra-ui/react @emotion/react

# yarn
yarn add @chakra-ui/react @emotion/react

# pnpm
pnpm add @chakra-ui/react @emotion/react

用的时候，在项目根部包一层 ChakraProvider，然后直接引入组件：

import { ChakraProvider, Button, Box, Text } from '@chakra-ui/react'

function App() {
  return (
    <ChakraProvider>
      <Box p={4}>
        <Text fontSize="xl">Hello</Text>
        <Button colorScheme="blue">Click me</Button>
      </Box>
    </ChakraProvider>
  )
}

组件的 props 设计走的是约束式风格：size、variant、colorScheme 这些 prop 直接控制组件外观，不需要写自定义 CSS。样式变体在主题里预定义好，保证整个项目的一致性。

3、 其他特点

Next.js RSC 支持：Chakra UI 已经适配了 React Server Components，在 Next.js 的 App Router 里可以直接用，不用额外配置客户端边界。

响应式设计：组件内置了响应式 prop，<Box w={{ base: '100%', md: '50%' }} /> 这样写就行，不用自己写 media query。

文档体系：官网 chakra-ui.com 提供了完整的文档，从安装到每个组件的用法都有覆盖，还有不少实际场景的例子。

社区反馈：React Router 的维护者 Ryan Florence 评价它是"见过的最好的 React 组件库之一"，Vercel 的 Guillermo Rauch 也给了正面评价。

4、 适合谁用

• 在做 React 项目、需要一套风格统一且支持无障碍的 UI 组件库的团队
• 用 Next.js 开发、需要兼容 RSC 的前端项目
• 对设计系统有需求、希望组件层面就能控制主题和样式的场景

件库的团队

• 用 Next.js 开发、需要兼容 RSC 的前端项目
• 对设计系统有需求、希望组件层面就能控制主题和样式的场景