How to Build shadcn/ui Components with Claude Code shadcn Skill

Mar 25, 2026

I was building a React dashboard with shadcn/ui and found myself constantly jumping between my code and the documentation. Every component had different props, variants, and composition patterns. I would generate a component with Claude Code, then spend 10 minutes fixing the API usage because Claude used the wrong variant names or missed required props.

Then I discovered the shadcn skill. Now I generate properly structured shadcn/ui components without opening the docs once.

The Problem: shadcn/ui Has Many Moving Parts

shadcn/ui isn’t a traditional component library. It’s a collection of reusable components you copy into your project. Each component has:

Multiple variants (default, destructive, outline, ghost, etc.)
Size props (sm, default, lg)
Composition patterns (Button in Card, Dropdown in Nav)
Specific import paths
Tailwind class conventions

Here’s what my workflow looked like before:

1. Ask Claude to create a component
2. Claude generates something "close"
3. Check docs for correct variant names
4. Fix the variant prop
5. Check docs for proper imports
6. Fix the import path
7. Check docs for composition patterns
8. Restructure the component
9. Test and iterate

Each component took 15-20 minutes of back-and-forth. I wanted Claude to know the shadcn/ui conventions without me spelling them out every time.

What Is the shadcn Skill?

The shadcn skill gives Claude Code deep knowledge of shadcn/ui components, their APIs, and best practices. When activated, Claude generates components that follow shadcn conventions automatically.

Here’s the difference:

┌─────────────────────────────────────────────────────────────────┐
│                    Without shadcn Skill                         │
├─────────────────────────────────────────────────────────────────┤
│ Claude: "I'll create a button component..."                     │
│ Output: Generic React button with custom CSS                    │
│ Result: You must rewrite for shadcn conventions                 │
└─────────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────────┐
│                    With shadcn Skill                            │
├─────────────────────────────────────────────────────────────────┤
│ Claude: "I'll create a button using shadcn/ui..."               │
│ Output: shadcn Button with correct variants and imports         │
│ Result: Works immediately with your shadcn setup                │
└─────────────────────────────────────────────────────────────────┘

Installation: One Command

Installing the shadcn skill takes about 15 seconds:

npx skills add shadcn/ui@shadcn -y -g

The -g flag is critical. It installs the skill globally, making it available across all your projects.

After installation, verify it’s working:

npx skills list -g

You should see output like:

Installed Skills (global):

1. shadcn
   Description: shadcn/ui component knowledge
   Location: ~/.claude/skills/shadcn
   Status: Active

Restart Claude Code to activate the skill.

I started with something practical. My project needed a navigation bar with user dropdown and notifications.

Here was my prompt:

"Create a navigation bar using shadcn/ui with:
- Logo on the left
- Navigation links in the center
- User avatar dropdown on the right
- Notification bell with badge
- Dark mode support"

Claude Code responded with a complete component. I expected the usual 10-minute fix session. Instead, I got:

- Correct shadcn imports from @/components/ui/*
- Button component with proper variants
- DropdownMenu with correct API
- Avatar component with fallback
- Badge component for notifications
- Proper Tailwind classes matching shadcn conventions
- Dark mode classes already included

Zero documentation lookups. Zero API corrections. It just worked.

The Trial-and-Error Process

Not every prompt worked perfectly. Here’s what I learned through experimentation.

Mistake 1: Not Mentioning shadcn/ui

My first vague prompt:

"Create a navigation component with dropdown and notifications"

Claude generated a custom solution with vanilla Tailwind. Not wrong, but not what I wanted.

The fix was simple. I added context:

"Using shadcn/ui, create a navigation component with dropdown and notifications"

Mistake 2: Mixing Component Libraries

"Create a form with Material UI TextField and shadcn Button"

This created inconsistent styling. shadcn/ui works best when used consistently throughout a project.

Mistake 3: Ignoring Project Context

The skill works best when Claude knows your project uses shadcn. I added this to my CLAUDE.md:

## UI Components
This project uses shadcn/ui for all UI components.
Always use shadcn components: Button, Card, Dialog, Form, etc.
Import from @/components/ui/[component-name]

Now Claude automatically uses shadcn conventions without me mentioning it.

What Works: Specific, Contextual Prompts

"Using shadcn/ui, create a [component name]:
- [Required features]
- [Specific variants if needed]
- [Composition with other shadcn components]
- [Responsive requirements]
- [Dark mode: yes/no]"

Practical Examples That Worked

Here are specific prompts that produced excellent results.

Example 1: Data Table with Actions

"Using shadcn/ui, create a data table for user management:
- Columns: name, email, role, status, actions
- Sortable columns
- Row actions: edit, delete
- Status badge with variants (active/inactive)
- Pagination at the bottom
- Dark mode support"

Output included proper Table component usage, Badge variants, and DropdownMenu for actions.

Example 2: Form with Validation

"Create a user profile form using shadcn/ui:
- Name, email, bio fields
- shadcn Form with react-hook-form integration
- Zod validation schema
- Submit and cancel buttons
- Loading state on submit
- Responsive two-column layout on desktop"

Output included the shadcn Form pattern with proper error handling.

Example 3: Dashboard Metrics

"Create a metrics dashboard section using shadcn/ui:
- 4 stat cards in a grid: revenue, users, orders, conversion
- Each card has icon, title, value, and trend indicator
- Card variant with hover effect
- Icons from lucide-react
- Trend shows positive/negative with color"

Output used Card component correctly with proper composition.

How the Skill Handles Composition

shadcn/ui shines with component composition. The skill understands this.

When I asked for a card with actions:

"Create a card with header, content area, and footer actions using shadcn/ui"

The skill generated:

<Card>
  <CardHeader>
    <CardTitle>Title</CardTitle>
    <CardDescription>Description</CardDescription>
  </CardHeader>
  <CardContent>
    {/* Content */}
  </CardContent>
  <CardFooter className="flex justify-between">
    <Button variant="outline">Cancel</Button>
    <Button>Save</Button>
  </CardFooter>
</Card>

Correct imports. Correct component nesting. Correct variant usage.

Theme Customization Through Prompts

The skill understands shadcn’s theming system. I customized a component’s appearance:

"Create a danger zone section using shadcn/ui:
- Card with destructive border color
- Warning icon in header
- Destructive button for delete action
- Muted description text
- Proper spacing between elements"

The skill applied the correct Tailwind classes:

- border-destructive for the card
- text-destructive for warning text
- button variant="destructive"
- text-muted-foreground for descriptions

Comparison: With vs Without the Skill

I tested the same task both ways.

Aspect	Without Skill	With Skill
Correct imports	Manual lookup required	Automatic
Variant names	Often wrong	Always correct
Component API	Generic React patterns	shadcn-specific patterns
Composition	Basic nesting	Proper Card/Header/Content/Footer
Dark mode	Manual classes	Automatic variants
Documentation lookups	5-10 per component	0-1 per component
Time to working code	15-20 minutes	2-5 minutes

The skill doesn’t eliminate the need to understand shadcn/ui. But it removes the constant reference lookups that slow down development.

Common Mistakes to Avoid

From my experience, these mistakes reduce the skill’s effectiveness.

1. Not Specifying the Project Uses shadcn/ui

Bad:

"Create a login form"

Better:

"Create a login form using shadcn/ui Form components"

2. Mixing UI Libraries

Bad:

"Create a modal with Material UI Dialog and shadcn Button"

Better:

"Create a modal using shadcn/ui Dialog and Button components"

3. Forgetting Responsive Requirements

Bad:

"Create a sidebar navigation"

Better:

"Create a responsive sidebar navigation that collapses on mobile using shadcn/ui Sheet"

4. Missing Composition Context

Bad:

"Create a button"

Better:

"Create a button with loading state for form submission using shadcn/ui Button"

When the Skill Falls Short

The shadcn skill isn’t perfect. Here are limitations I’ve encountered.

Custom Variants: The skill knows the default shadcn variants. If you’ve added custom variants to your project, you’ll need to specify them explicitly.

Complex Layouts: For intricate page layouts, the skill provides components but not the full page structure. You’ll combine its output with your own layout decisions.

Brand Customizations: The skill follows shadcn defaults. Heavy brand customizations still require manual Tailwind work.

New Components: When shadcn releases new components, the skill may lag behind until updated.

Integration with Your Workflow

I integrated the skill into my development workflow.

Step 1: Project Setup

# After creating a new shadcn/ui project
npx skills add shadcn/ui@shadcn -y -g

Step 2: CLAUDE.md Configuration

## UI Framework
This project uses shadcn/ui. All UI components should use:
- Import from @/components/ui/[component]
- Follow shadcn composition patterns
- Use Tailwind for custom styling
- Support dark mode variants

Step 3: Development Flow

1. Describe the component to Claude Code
2. Claude generates shadcn-compatible code
3. Review output for project-specific customizations
4. Make minor adjustments if needed
5. Test and commit

Total time per component: 5-10 minutes instead of 20-30 minutes.

Summary

The shadcn skill transforms Claude Code from a generic React code generator into a shadcn/ui specialist. With proper installation and prompts, you can generate components that:

Use correct imports and APIs
Follow shadcn composition patterns
Include proper variants and theming
Support dark mode out of the box
Require minimal documentation lookups

Key takeaways from my experience:

Install globally: Use -g flag to make the skill available across all projects
Be specific: Mention shadcn/ui in your prompts
Configure CLAUDE.md: Tell Claude your project uses shadcn
Expect correct APIs: The skill knows variant names, imports, and patterns
Know the limits: Custom variants and brand work still need manual effort

For developers using shadcn/ui extensively, this skill eliminates the constant context-switching between code and documentation. It doesn’t replace understanding shadcn/ui, but it removes the friction of remembering every API detail.

Final Words + More Resources

My intention with this article was to help others share my knowledge and experience. If you want to contact me, you can contact by email: Email me

Here are also the most important links from this article along with some further resources that will help you in this scope:

Oh, and if you found these resources useful, don’t forget to support me by starring the repo on GitHub!

How to Build shadcn/ui Components with Claude Code shadcn Skill

The Problem: shadcn/ui Has Many Moving Parts

What Is the shadcn Skill?

Installation: One Command

My First Attempt: A Navigation Component

The Trial-and-Error Process

Mistake 1: Not Mentioning shadcn/ui

Mistake 2: Mixing Component Libraries

Mistake 3: Ignoring Project Context

What Works: Specific, Contextual Prompts

Practical Examples That Worked

Example 1: Data Table with Actions

Example 2: Form with Validation

Example 3: Dashboard Metrics

How the Skill Handles Composition

Theme Customization Through Prompts

Comparison: With vs Without the Skill

Common Mistakes to Avoid

1. Not Specifying the Project Uses shadcn/ui

2. Mixing UI Libraries

3. Forgetting Responsive Requirements

4. Missing Composition Context

When the Skill Falls Short

Integration with Your Workflow

Step 1: Project Setup

Step 2: CLAUDE.md Configuration

Step 3: Development Flow

Summary

Final Words + More Resources

Comments