shadcn-ui by jezweb/claude-skills
npx skills add https://github.com/jezweb/claude-skills --skill shadcn-ui将 shadcn/ui 组件添加到已设置主题的 React 项目中。此技能在 tailwind-theme-builder 设置好 CSS 变量、ThemeProvider 和暗黑模式后运行。它负责组件的安装、自定义以及将组件组合成可工作的模式。
前提条件:主题基础设施必须已存在(CSS 变量、components.json、cn() 工具函数)。如果尚未设置,请先使用 tailwind-theme-builder。
按依赖顺序安装组件。先安装基础组件,再安装功能组件:
pnpm dlx shadcn@latest add button
pnpm dlx shadcn@latest add input label
pnpm dlx shadcn@latest add card
# 表单
pnpm dlx shadcn@latest add form # 需要: react-hook-form, zod, @hookform/resolvers
pnpm dlx shadcn@latest add textarea select checkbox switch
# 反馈
pnpm dlx shadcn@latest add toast # 需要: sonner
pnpm dlx shadcn@latest add alert badge
# 覆盖层
pnpm dlx shadcn@latest add dialog sheet popover dropdown-menu
# 数据展示
pnpm dlx shadcn@latest add table # 用于数据表格,还需要: @tanstack/react-table
pnpm dlx shadcn@latest add tabs separator avatar
# 导航
pnpm dlx shadcn@latest add navigation-menu command
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
| 组件 | 所需依赖 |
|---|---|
| Form | react-hook-form, zod, @hookform/resolvers |
| Toast | sonner |
| Data Table | @tanstack/react-table |
| Command | cmdk |
| Date Picker | date-fns (可选) |
单独安装外部依赖:pnpm add react-hook-form zod @hookform/resolvers
这些是已记录的修正方法,可防止常见错误:
// 不要使用空字符串值
<SelectItem value="">All</SelectItem> // 会出错
// 使用哨兵值
<SelectItem value="__any__">All</SelectItem> // 有效
const actual = value === "__any__" ? "" : value
// 不要使用 {...field} 展开 — 它会传递 null,而 Input 组件会拒绝
<Input
value={field.value ?? ''}
onChange={field.onChange}
onBlur={field.onBlur}
name={field.name}
ref={field.ref}
/>
// 不要使用动态导入 — 图标在生产环境中会被摇树优化掉
import * as LucideIcons from 'lucide-react'
const Icon = LucideIcons[iconName] // 在生产环境中会出错
// 使用显式映射
import { Home, Users, Settings, type LucideIcon } from 'lucide-react'
const ICON_MAP: Record<string, LucideIcon> = { Home, Users, Settings }
const Icon = ICON_MAP[iconName]
// 默认的 sm:max-w-lg 不会被 max-w-6xl 覆盖
<DialogContent className="max-w-6xl"> // 无效
// 使用相同的断点前缀
<DialogContent className="sm:max-w-6xl"> // 有效
shadcn 组件使用来自你主题的语义化 CSS 标记。自定义方法如下:
通过编辑 src/components/ui/ 中的组件文件来添加自定义变体:
// button.tsx — 添加 "brand" 变体
const buttonVariants = cva("...", {
variants: {
variant: {
default: "bg-primary text-primary-foreground",
brand: "bg-brand text-brand-foreground hover:bg-brand/90",
// ... 现有变体
},
},
})
使用来自你主题的语义化标记 — 切勿使用原始的 Tailwind 颜色:
// 不要使用原始颜色
<Button className="bg-blue-500"> // 错误
// 使用语义化标记
<Button className="bg-primary"> // 正确
<Card className="bg-card text-card-foreground"> // 正确
确定项目需要哪些 UI 模式:
| 需求 | 组件 |
|---|---|
| 带验证的表单 | Form, Input, Label, Select, Textarea, Button, Toast |
| 带排序的数据展示 | Table, Badge, Pagination |
| 管理后台 CRUD 界面 | Dialog, Form, Table, Button, Toast |
| 营销/落地页 | Card, Button, Badge, Separator |
| 设置/偏好 | Tabs, Form, Switch, Select, Toast |
| 导航 | NavigationMenu (桌面端), Sheet (移动端), ModeToggle |
先安装基础组件,然后根据识别的需求安装功能组件。使用上述命令。
将组件组合成可工作的模式。查看 references/recipes.md 获取完整的工作示例:
使用来自主题的语义化标记,应用项目特定的颜色和变体。
| 时机 | 阅读 |
|---|---|
| 选择组件、安装命令、属性 | references/component-catalogue.md |
| 构建完整的 UI 模式 | references/recipes.md |
每周安装量
1.5K
仓库
GitHub 星标数
643
首次出现
2026年2月18日
安全审计
安装于
opencode1.4K
gemini-cli1.4K
codex1.4K
github-copilot1.4K
cursor1.4K
kimi-cli1.3K
Add shadcn/ui components to a themed React project. This skill runs AFTER tailwind-theme-builder has set up CSS variables, ThemeProvider, and dark mode. It handles component installation, customisation, and combining components into working patterns.
Prerequisite : Theme infrastructure must exist (CSS variables, components.json, cn() utility). Use tailwind-theme-builder first if not set up.
Install components in dependency order. Foundation components first, then feature components:
pnpm dlx shadcn@latest add button
pnpm dlx shadcn@latest add input label
pnpm dlx shadcn@latest add card
# Forms
pnpm dlx shadcn@latest add form # needs: react-hook-form, zod, @hookform/resolvers
pnpm dlx shadcn@latest add textarea select checkbox switch
# Feedback
pnpm dlx shadcn@latest add toast # needs: sonner
pnpm dlx shadcn@latest add alert badge
# Overlay
pnpm dlx shadcn@latest add dialog sheet popover dropdown-menu
# Data Display
pnpm dlx shadcn@latest add table # for data tables, also: @tanstack/react-table
pnpm dlx shadcn@latest add tabs separator avatar
# Navigation
pnpm dlx shadcn@latest add navigation-menu command
| Component | Requires |
|---|---|
| Form | react-hook-form, zod, @hookform/resolvers |
| Toast | sonner |
| Data Table | @tanstack/react-table |
| Command | cmdk |
| Date Picker | date-fns (optional) |
Install external deps separately: pnpm add react-hook-form zod @hookform/resolvers
These are documented corrections that prevent common bugs:
// Don't use empty string values
<SelectItem value="">All</SelectItem> // BREAKS
// Use sentinel value
<SelectItem value="__any__">All</SelectItem> // WORKS
const actual = value === "__any__" ? "" : value
// Don't spread {...field} — it passes null which Input rejects
<Input
value={field.value ?? ''}
onChange={field.onChange}
onBlur={field.onBlur}
name={field.name}
ref={field.ref}
/>
// Don't use dynamic import — icons get tree-shaken in production
import * as LucideIcons from 'lucide-react'
const Icon = LucideIcons[iconName] // BREAKS in prod
// Use explicit map
import { Home, Users, Settings, type LucideIcon } from 'lucide-react'
const ICON_MAP: Record<string, LucideIcon> = { Home, Users, Settings }
const Icon = ICON_MAP[iconName]
// Default sm:max-w-lg won't be overridden by max-w-6xl
<DialogContent className="max-w-6xl"> // DOESN'T WORK
// Use same breakpoint prefix
<DialogContent className="sm:max-w-6xl"> // WORKS
shadcn components use semantic CSS tokens from your theme. To customise:
Add custom variants by editing the component file in src/components/ui/:
// button.tsx — add a "brand" variant
const buttonVariants = cva("...", {
variants: {
variant: {
default: "bg-primary text-primary-foreground",
brand: "bg-brand text-brand-foreground hover:bg-brand/90",
// ... existing variants
},
},
})
Use semantic tokens from your theme — never raw Tailwind colours:
// Don't use raw colours
<Button className="bg-blue-500"> // WRONG
// Use semantic tokens
<Button className="bg-primary"> // RIGHT
<Card className="bg-card text-card-foreground"> // RIGHT
Determine what UI patterns the project needs:
| Need | Components |
|---|---|
| Forms with validation | Form, Input, Label, Select, Textarea, Button, Toast |
| Data display with sorting | Table, Badge, Pagination |
| Admin CRUD interface | Dialog, Form, Table, Button, Toast |
| Marketing/landing page | Card, Button, Badge, Separator |
| Settings/preferences | Tabs, Form, Switch, Select, Toast |
| Navigation | NavigationMenu (desktop), Sheet (mobile), ModeToggle |
Install foundation first, then feature components for the identified needs. Use the commands above.
Combine components into working patterns. See references/recipes.md for complete working examples:
Apply project-specific colours and variants using semantic tokens from the theme.
| When | Read |
|---|---|
| Choosing components, install commands, props | references/component-catalogue.md |
| Building complete UI patterns | references/recipes.md |
Weekly Installs
1.5K
Repository
GitHub Stars
643
First Seen
Feb 18, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode1.4K
gemini-cli1.4K
codex1.4K
github-copilot1.4K
cursor1.4K
kimi-cli1.3K
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
102,200 周安装