shadcn/ui｜可定制的React UI组件与代码分发体系

shadcn/ui 是可定制的组件代码与分发体系。通过CLI把组件加入自己的项目，再修改样式、交互与组合方式；它不是一个统一黑盒组件包，也不是Agent Skill。适合具备React开发能力、希望掌握组件源码的开发者。

AI仙宝当前Laravel + Blade + Livewire + Tailwind技术栈可参考其交互模式、配色和布局，再使用现有Blade组件实现；不能直接把React JSX/TSX粘进Blade。即使官方有“Laravel”安装页，也不表示原生支持Livewire或Filament。确需引入React/Inertia属于项目架构选择，不应由资源安装指南擅自完成。

• 按钮、输入框与表单：构建可编辑数据和提交交互。
• Dialog弹窗、Dropdown Menu下拉菜单：组织次级动作与临时交互。
• 导航、菜单及侧边栏：组织页面结构。
• Card卡片、Table与Data Table：展示内容及数据；复杂表格通常需要按文档组合额外依赖。
• 组件源码进入项目后可调整语义颜色、Tailwind类与变体；不要把可定制理解成无成本升级。 仓库包含React的button.tsx和dialog.tsx等实现。可访问性基础依赖所选底层组件，但开发者仍须检查标签、焦点管理、对比度和键盘交互。

适合React后台、SaaS仪表盘、表单及内容站组件。先选定技术栈和风格预设，按需添加一个组件，修改设计Token与变体，再逐项检查键盘、弹窗焦点和手机布局。组件更新先对比自己的改动，避免覆盖业务代码。本文只整理资料，没有执行CLI安装。

官方Laravel安装文档明确要求先有React Starter Kit或已配置React + Inertia的Laravel项目。其命令示例：

npx shadcn@latest init
npx shadcn@latest add switch

组件写入类似 resources/js/components/ui/switch.tsx 的React路径，而不是 resources/views 的Blade文件。执行前应备份已有 components.json 与自定义组件，不能盲目照着文档确认覆盖。组件例子与安装环境以官方文档当前版本为准。

当前采集 packages/shadcn/package.json 为4.23.0，Node要求>=20.18.1。包管理器与React、Tailwind及底层可访问性组件要求随预设变化。无需购买仓库许可，但第三方服务和开发成本单独计算。官方不因提供组件而保证你的最终页面通过可访问性测试。

GitHub、npm registry、官方文档、字体和图标下载可用性尚未国内实测。组件运行时与安装时的网络依赖需分别检查；开源组件库本身不是海外AI API，是否调用模型由你的业务决定。