shadcn

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