shadcn/ui 是按需安装的可复制粘贴组件源码，非即装即用npm包；需在react项目中手动引入组件、配置tailwind、安装依赖（如@radix-ui、lucide-react）、重置button样式、正确使用useform与formfield，并确保tailwind.config.js content包含components/*/.{ts,tsx}。
shadcn/ui 不是「套用」而是「按需安装组件」
shadcn/ui 本质是一套可复制粘贴的、带 Tailwind CSS 的 React 组件源码，不是 npm 包直接导入就能用的 UI 库。你不能把现有 HTML 丢进去“转成” shadcn/ui 样式——它不解析 HTML，也不提供 html-to-shadcn 工具。
真正可行的路径只有一条：在已有 React 项目中，按需添加组件源码，并用其导出的 React 组件替换原有 HTML 结构。
- 原生 HTML 表单 → 改写为
FormField+FormItem+Input -
<button></button>→ 替换为Button组件（含variant、size等 props） - 需要图标？得手动加
LucideReact图标，比如SearchIcon或MenuIcon - 所有样式依赖 Tailwind，必须确保项目已配好
tailwind.config.js和@tailwind base / components / utilities
从 HTML 切换到 Button 组件时容易漏掉的三件事
很多人把 <button class="px-4 py-2 bg-blue-500">Submit</button> 直接替换成 <button>Submit</button>，结果样式全丢、点击无反馈、甚至报错。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 没装依赖：
npm install @radix-ui/react-slot @radix-ui/react-visually-hidden lucide-react（Button内部依赖这些） - 没引入样式重置：
Button默认继承button原生样式，需在globals.css中加@layer base { button { all: unset; } }，否则边框/焦点/字体可能异常 - 没传必要 props：
<button variant="default"></button>比裸写<button></button>更稳；遗漏asChild会导致嵌套Link或DropdownMenuItem时事件丢失
Form 表单迁移最常卡在 useForm 和 FormField 的配合上
HTML 表单靠 name 和 FormData，shadcn/ui 表单靠 react-hook-form 的 useForm + FormField 控制流。不理解这个分工，就会反复刷新页面或拿不到值。
-
useForm必须在顶层组件调用，返回的form对象要透传给每个FormField -
FormField不是 DOM 元素，它只负责把字段配置和表单状态绑定，真正的输入控件得用FormControl包一层Input或Select - 别手写
onChange：所有事件都由FormField自动接管，手动干预反而破坏校验和脏检查 - 错误信息显示要用
FormMessage，而不是自己写<span classname="text-red-500"></span>
Tailwind 配置不对，shadcn/ui 组件会「看起来像没生效」
组件本身没渲染错误，但颜色淡、间距乱、hover 无反应——八成是 Tailwind 没扫到 shadcn/ui 的组件文件路径，或者 content 配置漏了 components/**/*.{ts,tsx}。
- 检查
tailwind.config.js的content数组是否包含："./components/**/*.{ts,tsx}"和"./app/**/*.{ts,tsx}"（Next.js App Router） - 确保组件文件后缀是
.tsx（不是.jsx），否则某些 JIT 模式下类名不生成 - 别删
./src/app/globals.css里的@tailwind base—— shadcn/ui 的 reset 逻辑依赖它 - 开发时改了组件源码？记得重启 dev server，Tailwind 不监听
components/下的变更热更
shadcn/ui 的复杂性不在 API，而在它的「半托管」设计：你控制文件结构、依赖版本、样式注入时机。哪一环松动，整个组件链就静默失效。动手前先跑通一个 Button，比直接改表单更省时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
