SuperAPI AI 工具集

shadcn-customization

前端与建站

查看项目

更新于 10-16 00:06

技能介绍

用途:为 shadcn/ui 项目提供主题与组件定制指引,涉及颜色、主题、UI 相关工单时加载。

主要能力:组件引用语义化 CSS 变量令牌,变量定义在 :root(浅色)与 .dark(暗色)中,Tailwind 将其映射为 bg-primary、text-muted-foreground 等工具类,改变量即可改变所有引用组件。颜色遵循 name / name-foreground 约定,涵盖 background、card、primary、secondary、muted、accent、destructive、border、input、ring、chart-1 至 chart-5、sidebar-*、surface 等。颜色使用 OKLCH,如 --primary: oklch(0.205 0 0),参数为亮度(0–1)、色度(0 为灰)、色相(0–360)。暗色模式通过根元素 .dark 类切换,Atomic CRM 由 src/components/admin/theme-provider.tsx 的 ThemeProvider 接入,已在 src/components/admin/admin.tsx 挂载;可通过 <CRM> 组件的 lightTheme / darkTheme 属性定制调色板。--radius 全局控制圆角。

使用方式:应用预设可运行 npx shadcn@latest apply --preset a2r6bw,或 npx shadcn@latest apply a2r6bw;切换命名预设并覆盖现有组件用 npx shadcn@latest apply --preset nova;保留现有组件用 npx shadcn@latest init --preset nova --force --no-reinstall;也可用自定义主题 URL。添加自定义颜色时,在 npx shadcn@latest info 给出的 tailwindCssFile(通常 globals.css)中定义变量,并用 Tailwind v4 的 @theme inline 注册,不要新建 CSS 文件。组件定制优先顺序:内置变体、className 传 Tailwind 类、通过 cva 新增变体、包装组件组合原语。检查更新可用 npx shadcn@latest add button --diff、--dry-run 或指定文件 diff。

适用场景:主题换肤、暗色模式、颜色令牌扩展、组件变体与高阶包装组件。

限制:资料未提供具体收费、价格、平台支持范围与效果保证等信息。