Setting the file. One moment.
Subchapter 5.5
README.mdMarkdown7 KBView on GitHub
npx skills add google-labs-code/stitch-skills --skill shadcn-ui --globalThis skill provides expert guidance for integrating shadcn/ui components into your React applications. It helps you discover, install, customize, and optimize shadcn/ui components while following best practices.
Help me set up shadcn/ui in my Next.js project
Add a data table component with sorting and filtering to my app
Show me how to customize the button component with a new variant
Create a login form using shadcn/ui components with validation
Build a dashboard layout with sidebar navigation using shadcn/ui blocksshadcn/ui is a collection of beautifully designed, accessible, and customizable components built with:
Key Difference: Unlike traditional component libraries, shadcn/ui copies components directly into your project. This gives you:
skills/shadcn-ui/
├── SKILL.md — Core instructions & workflow
├── README.md — This file
├── examples/ — Example implementations
│ ├── form-pattern.tsx — Form with validation
│ ├── data-table.tsx — Advanced table with sorting
│ └── auth-layout.tsx — Authentication flow
├── resources/ — Reference documentation
│ ├── setup-guide.md — Project initialization
│ ├── component-catalog.md — Component reference
│ ├── customization-guide.md — Theming patterns
│ └── migration-guide.md — Migration from other libraries
└── scripts/ — Utility scripts
└── verify-setup.sh — Validate project configurationWhen activated, the agent follows this workflow:
components.jsonYour project should have:
# Create Next.js project with shadcn/ui
npx create-next-app@latest my-app
cd my-app
npx shadcn@latest init
# Add components
npx shadcn@latest add button
npx shadcn@latest add card# Initialize shadcn/ui
npx shadcn@latest init
# Configure when prompted:
# - Choose style (default/new-york)
# - Select base color
# - Configure CSS variables
# - Set import aliases
# Add your first component
npx shadcn@latest add buttonshadcn/ui provides 50+ components including:
Layout: Accordion, Card, Separator, Tabs, Collapsible
Forms: Button, Input, Label, Checkbox, Radio Group, Select, Textarea
Data Display: Table, Badge, Avatar, Progress, Skeleton
Overlays: Dialog, Sheet, Popover, Tooltip, Dropdown Menu
Navigation: Navigation Menu, Tabs, Breadcrumb, Pagination
Feedback: Alert, Alert Dialog, Toast, Command
Plus complete Blocks like:
Modify CSS variables in globals.css:
:root {
--primary: 221.2 83.2% 53.3%;
--secondary: 210 40% 96.1%;
/* ... */
}Components use class-variance-authority for variants:
const buttonVariants = cva(
"base-classes",
{
variants: {
variant: { default: "...", destructive: "..." },
size: { default: "...", sm: "..." },
}
}
)Create higher-level components:
// Compose existing components
export function FeatureCard({ title, description, icon }) {
return (
<Card>
<CardHeader>
{icon}
<CardTitle>{title}</CardTitle>
</CardHeader>
<CardContent>
<p>{description}</p>
</CardContent>
</Card>
)
}This skill leverages shadcn MCP server capabilities:
list_components - Browse component catalogget_component - Retrieve component sourceget_component_metadata - View props and dependenciesget_component_demo - See usage exampleslist_blocks - Browse UI blocksget_block - Retrieve block source with all filessearch_items_in_registries - Find components in custom registriesui/ pure: Don’t modify components in components/ui/ directlyshadcn add handle dependencies and updatescn() utility for all class mergingCheck your tsconfig.json includes path aliases:
{
"compilerOptions": {
"paths": {
"@/*": ["./src/*"]
}
}
}globals.css in your root layoutnpm install after adding components via CLIContributions to improve this skill are welcome! See the root CONTRIBUTING.md (opens in a new tab) for guidelines.
See LICENSE (opens in a new tab) in the repository root.