# Shadcn

> shadcn/ui component patterns, customization, theming, and integration.

- Skill: `majiayu000/shadcn-4` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add majiayu000/shadcn-4`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/shadcn-4/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/shadcn-4

---


# 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

```bash
npx shadcn-ui@latest add button dialog form
```

```tsx
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

```css
:root {
  --primary: 222.2 47.4% 11.2%;
  --primary-foreground: 210 40% 98%;
}
```

## Target Processes

- react-application-development
- nextjs-full-stack
- rapid-prototyping