shadcn-ui Skill for Claude: Add and Customize shadcn/ui Components

Makes Claude set up shadcn/ui in your React app, add components, and customize themes, variants and blocks.

Installs: 53.9K; on skills.sh
Stars: 8.7K; on GitHub
Files: 9; besides SKILL.md
Updated: Aug 2026; last repo commit

Ask for a data table, a login form or a dashboard layout in a shadcn/ui project and the agent follows this skill. It browses components, installs them with npx shadcn@latest add, initializes components.json, and customizes themes and variants with cn() and class-variance-authority.

It expects a React and Tailwind project. SKILL.md allows shadcn MCP tools, Read, Write, Bash and web_fetch, and the folder bundles three example files, four guides and a setup check script.

Good for

React developers adding shadcn/ui to a new or existing project
Designers customizing shadcn themes and variants
Teams building forms, data tables, auth screens and dashboards fast

Install shadcn-ui

Claude Code

Copy this prompt.

Install the shadcn-ui skill in Claude Code. Run this command:

npx skills add https://github.com/google-labs-code/stitch-skills --skill shadcn-ui

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

From its listing on skills.sh. Source.

What's in the skill

When it loads

Expert guidance for integrating and building applications with shadcn/ui components, including component discovery, installation, customization, and best practices.

Sections in SKILL.md

Core Principles
Component Discovery and Installation
1. Browse Available Components
2. Component Installation
3. Registry and Custom Registries
Project Setup
Initial Configuration
Required Dependencies
Component Architecture
File Structure
The cn() Utility
Customization Best Practices
1. Theme Customization
2. Component Variants
3. Extending Components
Blocks and Complex Components

Key facts

Author: google-labs-code
Repository: google-labs-code/stitch-skills
License: Apache-2.0
Installs on skills.sh: 53,859 (Nov 2, 2026)
GitHub stars: 8,653 (Nov 2, 2026)
Last repo commit: Aug 17, 2026
What installs: 10 files including SKILL.md (3 examples, 4 resource guides, README.md, verify-setup.sh)
Part of: google-labs-code/stitch-skills, in the stitch-build plugin
Prerequisites (skill README): React 18+, Tailwind CSS 3.0+, Node.js 18+, TypeScript recommended
Allowed tools: shadcn MCP tools, Read, Write, Bash, web_fetch

What it includes

Uses shadcn MCP tools: list_components, get_component_metadata, get_component_demo
Network · Browse components
Runs npx shadcn@latest add <name>, which downloads source and installs dependencies
Places files in components/ui/ and updates components.json.
Runs code · Add a component
Gets source with get_component and writes components/ui/<name>.tsx yourself
Installs peer dependencies by hand.
Write · Manual integration
Lists and searches registries defined in components.json
Tools: get_project_registries, list_items_in_registries, view_items_in_registries, search_items_in_registries.
Network · Custom registries
npx shadcn@latest create for new projects, init for existing ones
Creates components.json with style, base color, CSS variables, aliases and RSC settings.
Runs code · Project setup
Edits CSS variables in globals.css, builds cva variants, wraps components
Write · Customize
Lists and fetches full UI blocks via list_blocks and get_block
Categories named: calendar, dashboard, login, sidebar, products.
Write · Blocks
Fixes import aliases and styles; suggests tsc --noEmit, lint, axe and light/dark checks
Runs code · Troubleshooting and checks
Checks your project for components.json, Tailwind config, path aliases, CSS, deps
Bundled script. It prints a pass/fail list and exits with an error if components.json or the Tailwind config is missing.
Runs code · verify-setup.sh

From the official docs

Permissions

Medium risk

It runs npx commands that install packages and write component files into your project. Work on a branch and review the diff.

What it can do

Read your data
Create and change things
Delete things
Read-only mode

Watch out for

It runs npx and installs packages
`npx shadcn@latest` downloads the shadcn CLI and component source, and installs dependencies into your project. Check package.json changes before you commit.
It writes component files into your repo
New files go in components/ui/ and components.json is created or updated. Use a branch so you can review the diff.
It uses shadcn MCP tools when connected
Browsing and block lookups use the shadcn MCP tools named in SKILL.md.

Technical details

Talks to	npm registry. shadcn registry and docs
Scopes	Bash Write web_fetch

Questions

What does the shadcn-ui skill do?

It guides Claude through using shadcn/ui: discovering components, installing them, customizing themes and variants, and composing forms, dialogs, tables and blocks.

How do I install the shadcn-ui skill?

Use the install box above. The skill's own README lists npx skills add google-labs-code/stitch-skills --skill shadcn-ui --global.

Does it need the shadcn MCP server?

SKILL.md tells the agent to use shadcn MCP tools for browsing and lists them in its allowed tools, and it also gives an npx shadcn route for installing. The repo README says its skills need the Stitch MCP server to be set up, while the shadcn-ui README lists React, Tailwind and Node.js as prerequisites.

Does it work with Radix UI or Base UI?

Yes. SKILL.md says components can be built on Radix UI or Base UI primitives, and that the CLI adapts to your config.

Is the shadcn-ui skill safe?

It runs npx shadcn commands, which install packages and write files into your project, so use a branch and review the diff and package.json changes. The bundled verify-setup.sh checks for components.json, a Tailwind config, tsconfig, CSS and package.json entries and prints a pass or fail list; it contains no install commands.

What does my project need?

The skill README lists React 18+, Tailwind CSS 3.0+ and Node.js 18+, with TypeScript recommended. The bundled verify-setup.sh checks for components.json, a Tailwind config and a global CSS file.

Information

updated Nov 2, 2026

Repository: google-labs-code/stitch-skills
Folder: plugins/stitch-build/skills/shadcn-ui

google-labs-code/stitch-skills skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 5

shadcn-ui SKILL.md · github.com
shadcn-ui README · github.com
verify-setup.sh · github.com
stitch-skills README · github.com
shadcn-ui on skills.sh · skills.sh