react 常用组件库

1. Ant Design（蚂蚁设计）

• 特点：国内最流行的企业级 UI 组件库之一，基于「中后台设计体系」，组件丰富（表单、表格、弹窗、导航等）、设计规范统一，支持主题定制和国际化。
• 适用场景：企业级后台系统、管理平台、复杂业务场景。
• 优势：文档完善（中文支持友好）、社区活跃、迭代稳定，内置大量业务场景解决方案（如数据表格、权限控制）。
• 安装：

npm install antd

简单示例：

import { Button, DatePicker } from 'antd';function App() {return (<div><Button type="primary">提交</Button><DatePicker placeholder="选择日期" /></div>);
}

2. Material-UI（MUI）

• 特点：基于 Google 的「Material Design」设计语言，组件风格现代、交互细腻，支持高度定制（主题、样式覆盖），国际化支持完善。
• 适用场景：需要 Material Design 风格的应用、移动端适配需求高的项目、国际化产品。
• 优势：组件灵活度高（可拆分为基础组件组合使用）、TypeScript 支持友好、社区生态庞大。
• 安装

npm install @mui/material @emotion/react @emotion/styled

简单示例：

import { Button, Card } from '@mui/material';function App() {return (<Card sx={{ p: 2 }}><Button variant="contained" color="primary">确认</Button></Card>);
}

3. Chakra UI

• 特点：以「可访问性（A11y）」和「开发体验」为核心，组件轻量、API 简洁，支持响应式设计和主题定制，内置暗色模式。
• 适用场景：快速原型开发、注重无障碍的应用、需要灵活样式调整的项目。
• 优势：文档清晰（示例丰富）、组件组合性强、内置大量实用工具（如布局组件、动画效果）。
• 安装：

npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion

     简单示例

import { Box, Button, Heading } from '@chakra-ui/react';function App() {return (<Box p={4}><Heading as="h1" size="md">标题</Heading><Button colorScheme="blue" mt={2}>点击</Button></Box>);
}

4. Tailwind UI + Headless UI

• 特点：Tailwind UI 基于「Tailwind CSS」（原子化 CSS 框架），提供大量预制组件；Headless UI 是「无样式组件库」（仅提供逻辑，样式完全自定义），两者常结合使用。
• 适用场景：需要高度 UI 定制化的项目、追求设计独特性的应用、熟悉 Tailwind CSS 的团队。
• 优势：样式灵活性极高、无冗余 CSS、适合构建品牌差异化强的界面。
• 安装：

npm install @headlessui/react tailwindcss

5. Semantic UI React

• 特点：基于「Semantic UI」，组件命名贴近自然语言（如Button、Card、Modal），语义化强，上手简单。
• 适用场景：快速开发、注重代码可读性的项目。
• 优势：API 直观（如Button primary表示主按钮）、样式统一，适合新手。

6. Radix UI

• 特点：「底层组件库」，专注于可访问性、交互逻辑和跨浏览器兼容性，不包含默认样式，需自行搭配 CSS（如 Tailwind）。
• 适用场景：需要完全自定义 UI 但不想重复开发交互逻辑（如弹窗动画、下拉菜单行为）的项目。
• 优势：无样式侵入、交互细节完善（如键盘导航、焦点管理）。

选择建议

• 企业级后台 / 复杂业务：优先 Ant Design 或 MUI；
• 快速开发 / 注重可访问性：选 Chakra UI；
• 高度定制化 UI：Tailwind UI + Headless UI 或 Radix UI；
• Material Design 风格：直接用 MUI。