第 2 课：shadcn/ui

Copy-Paste 哲学 — 源码可见的组件库

CLI 工作流

# 初始化 shadcn/ui
npx shadcn@latest init

# 添加组件
npx shadcn@latest add button
npx shadcn@latest add dialog
npx shadcn@latest add form
npx shadcn@latest add card

组件源码直接复制到 components/ui/ 目录，你拥有完全的所有权和定制能力。

npm 黑盒 vs 源码可见

Ant Design（黑盒）

import { Modal } from 'antd'

// AI 看不到 Modal 的实现
// 想定制？只能覆盖 CSS
// 想改行为？祈祷有对应 prop
<Modal title="提示" open={open}>
  内容
</Modal>

shadcn/ui（源码可见）

import {
  Dialog, DialogContent,
  DialogHeader, DialogTitle
} from '@/components/ui/dialog'

// 源码在 components/ui/dialog.tsx
// AI 可以直接读取和修改
<Dialog open={open}>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>提示</DialogTitle>
    </DialogHeader>
    内容
  </DialogContent>
</Dialog>

shadcn/ui 生态

TweakCN

AI 主题编辑器，20K+ stars

tweakcn.com

magic-ui

动画组件库

magicui.design

aceternity-ui

现代 UI 组件

ui.aceternity.com

v0.dev

AI 生成 shadcn/ui 代码

v0.dev