HookAll (开发中...)

外观

本页目录

React UI 组件库 ​

React 生态中有大量优秀的 UI 组件库，可以帮助开发者快速构建高质量、现代化的界面。本文介绍当前主流的 React UI 库、接入方式以及常用 API。

一、Ant Design ​

简介：由阿里巴巴开源的企业级 UI 库，设计体系完善，组件丰富。 适用场景：后台管理系统、中后台产品。

安装与使用 ​

bash
npm install antd

在入口文件中引入样式：

jsx
import 'antd/dist/reset.css'
import { Button } from 'antd'

function App() {
  return <Button type="primary">主要按钮</Button>
}

常用组件与 API ​

组件功能常用属性
Button按钮type、onClick、disabled
Input输入框value、onChange、placeholder
Table表格columns、dataSource、pagination
Modal弹窗open、onOk、onCancel

二、Material UI (MUI) ​

简介：Google Material Design 官方实现，视觉现代、国际化支持完善。 适用场景：通用前台应用、跨平台项目。

安装与使用 ​

bash
npm install @mui/material @emotion/react @emotion/styled
jsx
import Button from '@mui/material/Button'

function App() {
  return <Button variant="contained">Contained</Button>
}

常用组件与 API ​

组件功能常用属性
Button按钮variant、color、onClick
TextField输入框label、value、onChange
Dialog对话框open、onClose
Grid栅格布局container、item、xs、md

三、Chakra UI ​

简介：轻量、响应式、可定制性强的现代化 UI 库。 适用场景：快速原型、响应式网站。

安装与使用 ​

bash
npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion
jsx
import { ChakraProvider, Button } from '@chakra-ui/react'

function App() {
  return (
    <ChakraProvider>
      <Button colorScheme="teal">Hello Chakra</Button>
    </ChakraProvider>
  )
}

常用组件与 API ​

组件功能常用属性
Button按钮colorScheme、size
Box通用容器p、m、bg、borderRadius
Flex布局容器direction、align、justify
Modal弹窗isOpen、onClose

四、shadcn/ui ​

简介：基于 Radix UI + Tailwind CSS 的现代组件集合，支持深度定制。 适用场景：追求设计一致性与高可定制性的项目。

安装与使用 ​

bash
npx shadcn@latest init

添加组件：

bash
npx shadcn@latest add button
jsx
import { Button } from '@/components/ui/button'

function App() {
  return <Button>Click me</Button>
}

常用组件 ​

  • Button
  • Input
  • Card
  • Dialog
  • DropdownMenu

五、对比总结 ​

特性Ant DesignMaterial UIChakra UIshadcn/ui
设计体系Ant Design SystemMaterial Design无固定体系（灵活）Tailwind + Radix
组件数量★★★★★★★★★☆★★★☆☆★★☆☆☆（可扩展）
主题定制支持 CSS 变量、主题配置支持主题系统内置主题配置完全自定义
体积较大（>1MB）中等（约 700KB）较小（<500KB）依赖 Tailwind
学习曲线中等中等偏高低中等
适用场景企业后台系统通用前台响应式网站现代个性化项目
国际化支持强强一般一般
社区活跃度★★★★★★★★★★★★★★☆★★★☆☆

在 GitHub 上编辑此页