| name | shadcn |
| description | shadcn/ui component patterns, customization, theming, and integration. |
| allowed-tools | Read, Write, Edit, Bash, Glob, Grep |
| graph | {"domains":["domain:web-development"],"specializations":["specialization:web-development"],"skillAreas":["skill-area:ui-component-libraries","skill-area:design-systems"],"roles":["role:frontend-engineer","role:product-designer"],"topics":["topic:component-based-architecture"]} |
shadcn/ui Skill
Expert assistance for building UIs with shadcn/ui components.
Capabilities
- Install and configure components
- Customize component styles
- Implement theming
- Extend components
- Integrate with forms
Usage Pattern
npx shadcn-ui@latest add button dialog form
import { Button } from '@/components/ui/button';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
<Dialog>
<DialogTrigger asChild>
<Button variant="outline">Open</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Title</DialogTitle>
</DialogHeader>
{/* Content */}
</DialogContent>
</Dialog>
Theming
:root {
--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;
}
Target Processes
- react-application-development
- nextjs-full-stack
- rapid-prototyping