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组件（含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>，结果样式全丢、点击无反馈、甚至报错。
- 没装依赖：
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>更稳；遗漏asChild会导致嵌套Link或DropdownMenuItem时事件丢失
Form 表单迁移最常卡在 useForm 和 FormField 的配合上
HTML 表单靠 name 和 FormData，shadcn/ui 表单靠 react-hook-form 的 useForm + FormField 控制流。不理解这个分工，就会反复刷新页面或拿不到值。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
-
useForm必须在顶层组件调用，返回的form对象要透传给每个FormField -
FormField不是 DOM 元素，它只负责把字段配置和表单状态绑定，真正的输入控件得用FormControl包一层Input或Select - 别手写
onChange：所有事件都由FormField自动接管，手动干预反而破坏校验和脏检查 - 错误信息显示要用
FormMessage，而不是自己写<span className="text-red-500">
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，比直接改表单更省时间。
