shadcn/ui

shadcn/ui 的做法和传统组件库相反：你不是安装一个包，而是用命令行把组件的源码拷进项目。代码从此属于你，想怎么改都行。

为什么是首选

• AI 能看见全部代码。 组件就在 src/components/ui/ 里，AI 修改样式或行为时不用猜库的 API，直接读源码改。
• 可访问性有保障。 底层基于成熟的无样式原语，键盘操作、焦点管理、ARIA 属性都已处理好——这正是 AI 自己写最容易出错的部分。
• 外观完全可控。 样式是 Tailwind 类名和 CSS 变量，换主题只改变量；从风格博物馆带回的 CSS 变量可以直接接上。
• 生态大。 AI 对它非常熟悉，常见需求几乎都有现成组件。

上手

pnpm dlx shadcn@latest init
pnpm dlx shadcn@latest add button dialog form

init 会询问基础颜色和路径别名，并生成 components.json 记录这些设置；之后每次 add 都按它放置文件。

需要知道的取舍

源码在你的仓库里，意味着上游的修复不会自动到来。我们的建议是：不要大改 ui/ 下的基础组件，业务上的定制在外面再包一层，这样需要时可以用 CLI 重新拉取覆盖。

# AGENTS.md（界面组件部分）

## 组件来源
- 交互组件（按钮、表单、对话框、菜单、标签页、提示框等）一律用 shadcn/ui 添加：
  `pnpm dlx shadcn@latest add <组件名>`，不要手写。
- 添加前先检查 `src/components/ui/` 是否已有。

## 修改规则
- 不要大改 `src/components/ui/` 下的基础组件；业务定制在 `src/components/` 中包一层。
- 颜色、圆角、字体只改 CSS 变量，不在组件里写死色值。

## 可访问性
- 图标按钮必须有 `aria-label`。
- 表单字段都要有关联的 label 和错误提示。
- 不要移除焦点样式。