Skills

shadcn-ui

Installation
Summary

Install and configure shadcn/ui components in themed React projects with guided component selection and common UI patterns.

  • Requires tailwind-theme-builder to have set up CSS variables, ThemeProvider, and dark mode infrastructure first
  • Covers 20+ components organized by category: foundation (button, input, card), forms (form, textarea, select), feedback (toast, alert), overlays (dialog, sheet, popover), data display (table, tabs), and navigation
  • Documents installation order, external dependencies (react-hook-form, zod, sonner, @tanstack/react-table), and four critical gotchas (Radix Select empty strings, React Hook Form null handling, Lucide icon tree-shaking, Dialog width overrides)
  • Includes recipes for contact forms, data tables, modal CRUD, navigation, and settings pages; customization via semantic CSS tokens and variant extension
SKILL.md

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)

Related skills

More from jezweb/claude-skills

Installs
2.5K
Repository
jezweb/claude-skills
GitHub Stars
776
First Seen
Feb 18, 2026
Security Audits
Gen Agent Trust HubPass
SocketPass
SnykPass