shadcn-ui
Install and configure shadcn/ui components for React projects. Guides component selection, installation order, dependency management, customisation with semantic tokens, and common UI recipes (forms, data tables, navigation, modals). Use after tailwind-theme-builder has set up the theme infrastructure, when adding components, building forms, creating data tables, or setting up navigation.
npx skills add jezweb/claude-skills --skill shadcn-ui --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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) ```bash pnpm dlx shadcn@latest add button pnpm dlx shadcn@latest add input label pnpm dlx shadcn@latest add card ``` ### Feature Components (install as needed) ```bash # 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 # Data Display pnpm dlx shadcn@latest add table # for data tables, also: @tanstack/react-table pnpm dlx shadcn@latest add tabs separator ava
- Installation Order
- Foundation (install first)
- Feature Components (install as needed)
- External Dependencies
- Known Gotchas
- Radix Select — No Empty Strings
- React Hook Form — Null Values
- Lucide Icons — Tree-Shaking
- Dialog Width Override
- Customising Components
- Variant extension
- Colour overrides
- Workflow
- Step 1: Assess Needs
pnpm dlx shadcn@latest add button pnpm dlx shadcn@latest add input label pnpm dlx shadcn@latest add card 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
What does the shadcn-ui skill do?
Install and configure shadcn/ui components for React projects. Guides component selection, installation order, dependency management, customisation with semantic tokens, and common UI recipes (forms, data tables, navigation, modals). Use after tailwind-theme-builder has set up the theme infrastructure, when adding components, building forms, creating data tables, or setting up navigation.
How do I install it?
Run `npx skills add jezweb/claude-skills --skill shadcn-ui --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From jezweb/claude-skills, a repository with 954 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.