By name: shadcnui-helper description: shadcn/ui 组件库的安装、配置、组件实现、主题定制与排障指南。在 React/Next.js/Vite/Remix 等项目中需要：(1) 初始化或升级 shadcn/ui，(2) 查阅组件 API 与示例，(3) 定制 themes/tokens/暗色模式，(4) 解决 Radix/Tailwind 集成问题，(5) 确保交互与可访问性一致时自动触发。
shadcn/ui Helper
什么时候用
- 要在 React/Next.js/Vite/Remix/Astro 框架中接入或升级 shadcn/ui
- 需要通过 CLI 安装组件、查看 props/依赖、调试交互或主题
- Tailwind、Radix、暗黑模式等集成出现冲突，或需要排查 SSR/CSR、Hydration、TS 配置问题
必须先看文档
- 访问唯一入口
https://ui.shadcn.com/llms.txt（官方索引）。 - 在索引里搜索所需主题或组件，复制对应 Markdown URL。
- 用
webfetch <URL>拉取内容，完整阅读依赖、props、slot、可访问性提示，再开始实现。 - 如果实现中遇到新问题，重新回到索引查找相关条目，切勿凭记忆编写。
示例流程
示例 1：安装 Button 组件
- 打开
llms.txt，找到 Button 条目并获取 URL。 webfetch阅读 Button 文档，确认依赖（如lucide-react）与 variant/size props。- 运行
npx shadcn-ui@latest add button，检查components/和lib/新文件。 - 在页面中引用新组件，按文档测试 hover/focus/disabled 状态。
示例 2：开启暗色主题
- 在
llms.txt搜索 Dark mode/Theming 两个条目，分别webfetch阅读。 - 按文档更新
components.json（如style: "default"）、tailwind.config.ts、globals.css中的 CSS 变量。 - 为根节点添加
class="dark"的切换逻辑，验证浅色/深色模式与 token 映射。 - 若有自定义 tokens，再回到索引寻找 Theming 文档的延伸章节确认写法。