什么是UI组件库

不要重复造轮子

每个网站都需要按钮、输入框、弹窗、下拉菜单……如果每次都从零开始写，效率太低了。UI组件库 就是别人帮你造好的一整套"UI零件"，拿来直接用。

💡 类比：UI组件库就像宜家的家具。你不用自己做桌子椅子，挑好款式，组装起来就行。

UI组件库提供什么？

主流 UI 组件库

使用组件库 vs 手写代码

手写一个按钮

// 手写 — 需要考虑很多细节
function Button({ children, variant, size, disabled, onClick }) {
  const baseStyles = "rounded font-medium transition-colors";
  const variants = {
    primary: "bg-orange-500 text-white hover:bg-orange-600",
    secondary: "bg-gray-200 text-gray-800 hover:bg-gray-300",
    outline: "border border-gray-300 hover:bg-gray-100",
  };
  const sizes = {
    sm: "px-3 py-1 text-sm",
    md: "px-4 py-2",
    lg: "px-6 py-3 text-lg",
  };

  return (
    <button
      className={`${baseStyles} ${variants[variant]} ${sizes[size]}`}
      disabled={disabled}
      onClick={onClick}
    >
      {children}
    </button>
  );
}

用组件库（shadcn/ui）

// 一行搞定
import { Button } from "@/components/ui/button";

<Button variant="default" size="lg" onClick={handleClick}>
  点击我
</Button>

shadcn/ui：现代 Next.js 项目的首选

shadcn/ui 是目前最流行的 React 组件库之一，特点是代码直接拷贝到你的项目中，完全可控：

# 初始化
npx shadcn-ui@latest init

# 添加组件
npx shadcn-ui@latest add button
npx shadcn-ui@latest add dialog
npx shadcn-ui@latest add table

import { Button } from "@/components/ui/button";
import {
  Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger,
} from "@/components/ui/dialog";

function MyPage() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button>打开弹窗</Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>提示</DialogTitle>
        </DialogHeader>
        <p>这是一个弹窗内容</p>
      </DialogContent>
    </Dialog>
  );
}

Ant Design：后台管理系统首选

Ant Design 是蚂蚁集团开发的组件库，组件最全，特别适合做后台系统：

import { Table, Button, Space, Tag } from "antd";

function UserTable() {
  const columns = [
    { title: "姓名", dataIndex: "name" },
    { title: "角色", dataIndex: "role",
      render: (role) => <Tag color="blue">{role}</Tag>
    },
    { title: "操作",
      render: () => (
        <Space>
          <Button type="link">编辑</Button>
          <Button type="link" danger>删除</Button>
        </Space>
      ),
    },
  ];

  return <Table columns={columns} dataSource={data} />;
}

有样式 vs 无样式（Headless）

如何选择组件库？

🎯 AI编程小贴士：选好组件库后，直接告诉 AI"用 shadcn/ui 帮我做一个用户管理页面，有表格、搜索框和新增按钮"，它会帮你生成完整代码，包括组件引入和布局。

小结

• UI组件库提供现成的按钮、表单、弹窗等组件，避免重复造轮子
• shadcn/ui 是现代 Next.js 项目的首选，代码可控、基于 Tailwind
• Ant Design 适合后台管理系统，组件最全面
• Headless 组件库只提供逻辑和交互，样式完全自定义
• 选择组件库要考虑：项目类型、设计要求、团队技术栈