SuperAPI AI 工具集

shadcn-impl-framework-integration

前端与建站

查看项目

更新于 10-15 22:18

技能介绍

用途:在 Vite、Next.js(App/Pages Router)、React Router v7(原 Remix)、Astro、TanStack Start 项目中初始化 shadcn ui 时,按框架选择正确的 CLI 模板与配置。

主要能力:给出五种模板的初始化矩阵,区分 init 参数(-t next / vite / react-router / astro / start)、components.json 的 rsc 默认值、别名解析方式、Tailwind 插件与暗色模式方案。强调 rsc 只在真正编译 "use client" 边界的框架中设为 true,否则会静默破坏 SSR;别名需让 tsconfig paths 与打包器 alias 保持一致。

使用方式:按框架执行对应命令,例如 Next.js 用 pnpm dlx shadcn@latest init -t next,Vite 用 -t vite 并在 vite.config.ts 注册 @tailwindcss/vite 与 @ 别名,React Router 用 -t react-router(别名 ~/*),Astro 用 -t astro,TanStack Start 用 -t start。Laravel + Inertia 需先 laravel new 再执行不带 -t 的 init;CRA、Parcel、Rspack 不受 CLI 支持,需参考 Vite 方案手动适配别名。

适用场景:需要为上述框架搭建 shadcn ui 基础环境、配置暗色模式与别名时。

限制:资料未提供各框架之外的官方支持说明;暗色模式在 Vite、React Router、TanStack Start 使用自定义 Context,Astro 使用内联脚本,Next.js 使用 next-themes,不应混用。具体代码示例见配套 examples.md 与 methods.md。