重要前提
安装AI Skills的关键前提是:必须科学上网,且开启TUN模式,这一点至关重要,直接决定安装能否顺利完成,在此郑重提醒三遍:科学上网,科学上网,科学上网。查看完整安装教程 →
shadcn-components by sgcarstrends/sgcarstrends
npx skills add https://github.com/sgcarstrends/sgcarstrends --skill shadcn-components组件位于 packages/ui/ 目录中。shadcn/ui 被复制到您的代码库中,以便完全控制。
packages/ui/
├── src/
│ ├── components/ # shadcn/ui 组件
│ ├── lib/utils.ts # cn() 工具函数
│ └── styles/globals.css
├── components.json # shadcn/ui 配置
└── package.json
// 搜索组件
mcp__shadcn__search_items_in_registries({ registries: ["@shadcn"], query: "button" })
// 查看组件详情
mcp__shadcn__view_items_in_registries({ items: ["@shadcn/button", "@shadcn/card"] })
// 获取添加命令
mcp__shadcn__get_add_command_for_items({ items: ["@shadcn/dropdown-menu"] })
cd packages/ui
npx shadcn@latest add dropdown-menu
npx shadcn@latest add dropdown-menu select tabs # 添加多个
在 packages/ui/src/index.ts 中导出:
export {
DropdownMenu,
DropdownMenuTrigger,
DropdownMenuContent,
DropdownMenuItem,
} from "./components/dropdown-menu";
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
在应用中使用:
import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from "@sgcarstrends/ui";
// 按钮变体:default, destructive, outline, secondary, ghost, link
// 按钮尺寸:default, sm, lg, icon
<Button variant="destructive" size="sm">删除</Button>
// 卡片组合
<Card>
<CardHeader>
<CardTitle>标题</CardTitle>
<CardDescription>描述</CardDescription>
</CardHeader>
<CardContent>内容</CardContent>
<CardFooter>页脚</CardFooter>
</Card>
// 对话框
<Dialog>
<DialogTrigger asChild><Button>打开</Button></DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>确认</DialogTitle>
<DialogDescription>您确定吗?</DialogDescription>
</DialogHeader>
</DialogContent>
</Dialog>
// 表单元素
<Label htmlFor="name">姓名</Label>
<Input id="name" placeholder="输入姓名" />
<Textarea id="message" />
// 徽章变体:default, secondary, destructive, outline
<Badge variant="secondary">状态</Badge>
直接在 packages/ui/src/components/ 中编辑组件文件:
// button.tsx - 添加自定义变体
const buttonVariants = cva("inline-flex items-center...", {
variants: {
variant: {
// 现有变体...
success: "bg-green-500 text-white hover:bg-green-600",
},
size: {
// 现有尺寸...
xl: "h-14 rounded-md px-10 text-lg",
},
},
});
// packages/ui/src/components/stat-card.tsx
import { Card, CardHeader, CardTitle, CardContent } from "./card";
import { cn } from "../lib/utils";
interface StatCardProps {
title: string;
value: string | number;
trend?: "up" | "down";
className?: string;
}
export function StatCard({ title, value, trend, className }: StatCardProps) {
return (
<Card className={cn("", className)}>
<CardHeader className="flex flex-row items-center justify-between pb-2">
<CardTitle className="text-sm font-medium">{title}</CardTitle>
{trend && <span className={trend === "up" ? "text-green-500" : "text-red-500"}>{trend === "up" ? "↑" : "↓"}</span>}
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">{value}</div>
</CardContent>
</Card>
);
}
import { cn } from "@sgcarstrends/ui/lib/utils";
<div className={cn("base-classes", condition && "conditional", className)}>
编辑 packages/ui/src/styles/globals.css:
@layer base {
:root {
--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;
/* ... */
}
.dark {
--primary: 210 40% 98%;
/* ... */
}
}
cd packages/ui
npx shadcn@latest add button --overwrite
packages/ui/src/index.ts 中的导出tailwind.config.ts 中的内容路径pnpm buildsize-* 而不是 h-* w-*packages/ui/CLAUDE.md 获取包详情每周安装次数
78
代码仓库
GitHub 星标数
20
首次出现
2026年1月19日
安全审计
安装于
claude-code64
gemini-cli61
opencode60
codex58
github-copilot57
cursor56
Components live in packages/ui/. shadcn/ui is copied into your codebase for full control.
packages/ui/
├── src/
│ ├── components/ # shadcn/ui components
│ ├── lib/utils.ts # cn() utility
│ └── styles/globals.css
├── components.json # shadcn/ui config
└── package.json
// Search for components
mcp__shadcn__search_items_in_registries({ registries: ["@shadcn"], query: "button" })
// View component details
mcp__shadcn__view_items_in_registries({ items: ["@shadcn/button", "@shadcn/card"] })
// Get add command
mcp__shadcn__get_add_command_for_items({ items: ["@shadcn/dropdown-menu"] })
cd packages/ui
npx shadcn@latest add dropdown-menu
npx shadcn@latest add dropdown-menu select tabs # Multiple
Export in packages/ui/src/index.ts:
export {
DropdownMenu,
DropdownMenuTrigger,
DropdownMenuContent,
DropdownMenuItem,
} from "./components/dropdown-menu";
Use in apps:
import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from "@sgcarstrends/ui";
// Button variants: default, destructive, outline, secondary, ghost, link
// Button sizes: default, sm, lg, icon
<Button variant="destructive" size="sm">Delete</Button>
// Card composition
<Card>
<CardHeader>
<CardTitle>Title</CardTitle>
<CardDescription>Description</CardDescription>
</CardHeader>
<CardContent>Content</CardContent>
<CardFooter>Footer</CardFooter>
</Card>
// Dialog
<Dialog>
<DialogTrigger asChild><Button>Open</Button></DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Confirm</DialogTitle>
<DialogDescription>Are you sure?</DialogDescription>
</DialogHeader>
</DialogContent>
</Dialog>
// Form elements
<Label htmlFor="name">Name</Label>
<Input id="name" placeholder="Enter name" />
<Textarea id="message" />
// Badge variants: default, secondary, destructive, outline
<Badge variant="secondary">Status</Badge>
Edit component file directly in packages/ui/src/components/:
// button.tsx - Add custom variant
const buttonVariants = cva("inline-flex items-center...", {
variants: {
variant: {
// existing variants...
success: "bg-green-500 text-white hover:bg-green-600",
},
size: {
// existing sizes...
xl: "h-14 rounded-md px-10 text-lg",
},
},
});
// packages/ui/src/components/stat-card.tsx
import { Card, CardHeader, CardTitle, CardContent } from "./card";
import { cn } from "../lib/utils";
interface StatCardProps {
title: string;
value: string | number;
trend?: "up" | "down";
className?: string;
}
export function StatCard({ title, value, trend, className }: StatCardProps) {
return (
<Card className={cn("", className)}>
<CardHeader className="flex flex-row items-center justify-between pb-2">
<CardTitle className="text-sm font-medium">{title}</CardTitle>
{trend && <span className={trend === "up" ? "text-green-500" : "text-red-500"}>{trend === "up" ? "↑" : "↓"}</span>}
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">{value}</div>
</CardContent>
</Card>
);
}
import { cn } from "@sgcarstrends/ui/lib/utils";
<div className={cn("base-classes", condition && "conditional", className)}>
Edit packages/ui/src/styles/globals.css:
@layer base {
:root {
--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;
/* ... */
}
.dark {
--primary: 210 40% 98%;
/* ... */
}
}
cd packages/ui
npx shadcn@latest add button --overwrite
packages/ui/src/index.tstailwind.config.tspnpm build in packages/uisize-* instead of h-* w-* for equal dimensionspackages/ui/CLAUDE.md for package detailsWeekly Installs
78
Repository
GitHub Stars
20
First Seen
Jan 19, 2026
Security Audits
Gen Agent Trust HubFailSocketPassSnykWarn
Installed on
claude-code64
gemini-cli61
opencode60
codex58
github-copilot57
cursor56
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
127,000 周安装