Best shadcn/ui Skills for Claude Code (2026)

The shadcn-ui skill by google-labs-code (40,113 installs, skills.sh registry) is the most-installed skill specifically dedicated to shadcn/ui component integration - it teaches Claude Code the shadcn model: beautiful accessible components you copy into the project rather than importing from node_modules, with no version lock-in and full styling ownership. For the broadest shadcn-based UI generation, web-artifacts-builder by Anthropic (65,015 installs, skills.sh registry) bundles React 18 + TypeScript + Vite + Tailwind 3.4.1 + shadcn/ui into a single production-ready scaffold skill.

Why has shadcn/ui become the default for AI-generated code?

shadcn/ui has become the convergence point for AI-generated React UI in 2026. V0 (Vercel), Bolt (StackBlitz), Lovable, and Claude Code all default to its patterns when generating components. The reason is architectural: shadcn components are Radix UI primitives wrapped in Tailwind utility classes, copy-pasted directly into your repository. The agent owns the component source code, not a dependency manager - so AI-generated modifications don't break at the next npm update.

The skills.sh catalog (25,053 total listings, 81,930,457 total installs) shows 50+ shadcn-related skills. The top skills span three tiers: dedicated shadcn integration skills, broader UI scaffolding skills that include shadcn, and design-system skills built on top of it.

Which shadcn/ui skills rank highest on skills.sh?

`web-artifacts-builder` - 65,015 installs, 147,832 GitHub stars (anthropics/skills). The highest-installed skill that packages shadcn/ui. Built by Anthropic, it scaffolds React 18 + TypeScript + Vite + Parcel + Tailwind 3.4.1 + shadcn/ui into a production-ready artifact environment. 40+ shadcn/ui components and Radix dependencies are pre-installed via an init script. A 5-step workflow: init → develop → bundle → display → optional test. The output is a single-file HTML artifact suitable for any artifact host. Skill page: /skills/anthropics/skills/web-artifacts-builder.

`shadcn-ui` - 40,113 installs, 5,949 GitHub stars (google-labs-code/stitch-skills). The most-installed dedicated shadcn skill. Uses MCP tools (list_components, get_component_metadata, registry discovery) to guide Claude Code through component selection, installation, and customization - without guessing Radix or Base UI dependencies. Supports both Radix UI and Base UI primitive choices. Stress-tests the copy-in model: full ownership of styling, behavior, and selective updates. The right choice for any Next.js or Vite project already using Tailwind. Skill page: /skills/google-labs-code/stitch-skills/shadcn-ui.

`ckm:ui-styling` - 28,716 installs, 88,743 GitHub stars (nextlevelbuilder/ui-ux-pro-max-skill). A combined shadcn/ui + Tailwind + design token skill. Covers accessible dialogs, dropdowns, forms, tables, navigation, responsive layouts, dark mode, and theme token customization in one install. The best choice when a project needs shadcn components, Tailwind utilities, and a named design vocabulary together - for Next.js, Vite, Remix, and Astro stacks.

`shadcn-ui` - 18,224 installs, 271 GitHub stars (giuseppe-trisciuoglio/developer-kit). Initializes shadcn/ui, adds accessible Radix-based components, and builds validated forms with React Hook Form, Zod, and Tailwind theming. The form-building specialist - it goes deep on controlled form patterns, validation schemas, and error display rather than the broader component ecosystem.

`ai-elements` - 11,605 installs, 2,079 GitHub stars (vercel). Vercel's AI UI component skill. Extends shadcn/ui with components designed for AI interactions: streaming text blocks, loading skeletons, chat bubbles, reasoning traces, and tool-call displays. Use this when building AI-native interfaces - chatbots, coding assistants, or any product where the UI must render streaming LLM output.

What is the shadcn/ui model and why does it matter for AI agents?

Traditional component libraries ship as npm packages. Your codebase depends on @radix-ui/react-dialog@1.2.3 and class-variance-authority. When those packages update with breaking changes, your UI breaks - and an AI agent updating the packages without understanding the change history can introduce regressions.

shadcn/ui's model is different: it generates component source code into your repository. npx shadcn@latest add button creates components/ui/button.tsx in your project - code you own, code Claude Code can read and modify directly, code that doesn't break at the next dependency update.

For AI agents, this means perfect transparency: every component definition is visible, modifiable, and co-located with the rest of the project code.

Does shadcn/ui work with Tailwind v4?

shadcn/ui v2 supports Tailwind v4's @theme directive natively. Token names like --primary, --muted, and --background map to the v4 CSS custom property system rather than the v3 JavaScript config object. If you're on Tailwind v3, the standard shadcn/ui installation still works - just note that the tailwind-v4-shadcn bridge skill handles the migration path if you upgrade.

For Tailwind specifics, see Best Tailwind CSS Skills for Claude Code.

Does shadcn/ui handle accessibility automatically?

Radix UI primitives - the foundation of every shadcn/ui component - are ARIA-compliant by design. Dialog components manage focus traps, keyboard navigation, and aria-describedby automatically. Select dropdowns handle role=listbox and keyboard selection. Tooltips manage hover and focus trigger states.

That said, Radix/shadcn handles semantic structure, not color contrast or motion preferences. For full WCAG compliance, pair the shadcn-ui skill with the web-design-guidelines skill (390,792 installs) for UI audits and the accessibility skill (28,457 installs) for audits. See Best Accessibility Skills for Claude Code and /design/accessibility.

How does shadcn/ui integrate with design systems and Figma?

shadcn/ui's token layer (--primary, --secondary, --muted, --accent, --background, --foreground) is the canonical bridge between design tokens and component implementation. Figma Variables exported as CSS custom properties map directly to shadcn's token names. The figma-create-design-system-rules skill reads this mapping and generates constraints for Claude Code.

For design system governance, see Best Design System Skills for Claude Code. For the Figma integration layer, see Best Figma-to-Code Skills for Claude Code. For the visual aesthetic layer above components, see Best Visual Design Skills for Claude Code.

Key takeaways

• `web-artifacts-builder` (65,015 installs, skills.sh registry) is the top shadcn/ui scaffold skill by installs - bundles React 18 + TypeScript + Vite + Tailwind + shadcn into a complete artifact environment.
• `shadcn-ui` by google-labs-code (40,113 installs) is the most-installed dedicated shadcn skill - uses MCP component discovery, supports Radix UI and Base UI primitives, zero version lock-in.
• `ckm:ui-styling` (28,716 installs) combines shadcn + Tailwind + design tokens in one install - the best all-in-one option.
• `ai-elements` by Vercel (11,605 installs) extends shadcn for AI-native UIs: streaming text, chat bubbles, reasoning trace components.
• shadcn/ui's copy-in model gives Claude Code full component source transparency - no dependency graph surprises when modifying generated code.
• Pair with web-design-guidelines (390,792 installs) for accessibility audits; Radix UI handles ARIA structure, not color contrast or motion.

Browse all shadcn-related skills at /category/frontend-design or explore Best Tailwind CSS Skills for the utility styling layer beneath shadcn components.

Common questions