Shadcn Ui

This handles shadcn/ui component installation and wiring after you've set up your theme infrastructure with tailwind-theme-builder. It knows the installation order (foundation components before feature components), manages external dependencies like react-hook-form and sonner, and includes documented fixes for common gotchas like Radix Select breaking on empty strings and Lucide icons getting tree-shaken in production. The workflow is straightforward: assess what UI patterns you need (forms, data tables, navigation), install the right component sets, then combine them into working recipes. The references include a component catalogue and complete pattern examples for contact forms, CRUD modals, and data tables with sorting.

skills.sh installs: 3.6K
GitHub stars: 1.1K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add jezweb/claude-skills --skill shadcn-ui --agent claude-code

Installs into .claude/skills of the current project.

Files

shadcn/ui Components

Add shadcn/ui components to a themed React project. This skill runs AFTER tailwind-theme-builder has set up CSS variables, ThemeProvider, and dark mode. It handles component installation, customisation, and combining components into working patterns.

Prerequisite: Theme infrastructure must exist (CSS variables, components.json, cn() utility). Use tailwind-theme-builder first if not set up.

Installation Order

Install components in dependency order. Foundation components first, then feature components:

Foundation (install first)

pnpm dlx shadcn@latest add button
pnpm dlx shadcn@latest add input label
pnpm dlx shadcn@latest add card

Feature Components (install as needed)

# Forms
pnpm dlx shadcn@latest add form        # needs: react-hook-form, zod, @hookform/resolvers
pnpm dlx shadcn@latest add textarea select checkbox switch

# Feedback
pnpm dlx shadcn@latest add toast        # needs: sonner
pnpm dlx shadcn@latest add alert badge

# Overlay
pnpm dlx shadcn@latest add dialog sheet popover dropdown-menu

SKILL.md on GitHub