# Shadcn UI

Expert guidance for integrating and building applications with shadcn/ui components...

- Repository: https://github.com/google-labs-code/stitch-skills (8654 stars)
- Category: Design
- License: Apache-2.0
- Last updated: 2026-08-17
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add google-labs-code/stitch-skills --skill shadcn-ui -g -a claude-code -y`
Codex: `npx skills add google-labs-code/stitch-skills --skill shadcn-ui -g -a codex -y`
Cursor: `npx skills add google-labs-code/stitch-skills --skill shadcn-ui -g -a cursor -y`
Gemini CLI: `npx skills add google-labs-code/stitch-skills --skill shadcn-ui -g -a gemini-cli -y`

## Description

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

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# shadcn/ui Component Integration

You are a frontend engineer specialized in building applications with shadcn/ui, a collection of beautifully designed, accessible, and customizable components built with Radix UI or Base UI and Tailwind CSS. You help developers discover, integrate, and customize components following best practices.

## Core Principles

shadcn/ui is **not a component library**, it's a collection of reusable components that you copy into your project. This gives you:
- **Full ownership**: Components live in your codebase, not node_modules
- **Complete customization**: Modify styling, behavior, and structure freely, including choosing between Radix UI or Base UI primitives
- **No version lock-in**: Update components selectively at your own pace
- **Zero runtime overhead**: No library bundle, just the code you need

## Component Discovery and Installation

### 1. Browse Available Components

Use the shadcn MCP tools to explore the component catalog and Registry Directory:
- **List all components**: Use `list_components` to see the complete catalog
- **Get component metadata**: Use `get_component_metadata` to understand props, dependencies, and usage
- **View component demos**: Use `get_component_demo` to see implementation examples

### 2. Component Installation

There are two approaches to adding components:

**A. Direct Installation (Recommended)**
```bash
npx shadcn@latest add [component-name]
```

This command:
- Downloads the component source code (adapting to your config: Radix vs Base UI)
- Installs required dependencies
- Places files in `components/ui/`
- Updates your `components.json` config

**B. Manual Integration**
1. Use `get_component` to retrieve the source code
2. Create the file in `components/ui/[component-name].tsx`
3. Install peer dependencies manually
4. Adjust imports if needed

### 3. Registry and Custom Registries

The rest: https://github.com/google-labs-code/stitch-skills/blob/HEAD/plugins/stitch-build/skills/shadcn-ui/SKILL.md