UI 组件库

从零写 Button、Dialog、Select 费时且难统一无障碍。MUI、Chakra UI、shadcn/ui 代表三种典型路线：全量 Material、CSS-in-JS 主题、复制到项目的 Radix + Tailwind 原语。

学习目标

• 对比三类 UI 库的集成方式与定制成本
• 结合 Tailwind / Next.js 选型（见 nextjs-essentials）
• 避免「库叠库」导致 bundle 膨胀

三种路线

库	风格	定制	与 Tailwind
MUI	Material Design	theme 覆盖	可共存，需约定
Chakra	简约、token	extendTheme	类似
shadcn/ui	你仓库里的组件源码	直接改文件	原生 Tailwind

shadcn/ui 不是 npm 大包：CLI 把组件复制到 components/ui/，所有权在你，适合 platform 这类 Tailwind 优先 项目。

MUI 要点

import Button from "@mui/material/Button";
import { ThemeProvider, createTheme } from "@mui/material/styles";

const theme = createTheme({
  palette: { primary: { main: "#2563eb" } },
});

export function App() {
  return (
    <ThemeProvider theme={theme}>
      <Button variant="contained">开始学习</Button>
    </ThemeProvider>
  );
}

优势：组件全、DataGrid 等企业件。代价：emotion/styled 运行时、与 Tailwind 类名混用时需团队规范。

Chakra 要点

import { ChakraProvider, Button, Box } from "@chakra-ui/react";

<Box p={4}>
  <Button colorScheme="blue">提交</Button>
</Box>

API 一致、暗色模式友好；v3 与旧版迁移需查官方指南。

shadcn/ui 要点

npx shadcn@latest init
npx shadcn@latest add button dialog

生成 Button.tsx 基于 Radix 无障碍原语 + class-variance-authority。与 Next.js App Router、Server Component 共存时，交互组件标 'use client'。

选型建议

• 设计稿已是 Material：MUI
• 快速后台、统一 token：Chakra
• Tailwind 站点、要控源码：shadcn/ui
• 仅几个控件：Headless UI / Radix 单组件，不必整库

状态与数据仍用 rxe-state、，UI 库 状态管理。