shadcn-ui
Expert guidance for discovering, installing, and customizing shadcn/ui components in your project.
- shadcn/ui is a copy-paste component collection, not a library—components live in your codebase for full ownership and customization without version lock-in
- Includes 50+ accessible, pre-built components (buttons, dialogs, forms, tables, etc.) built on Radix UI or Base UI primitives with Tailwind CSS styling
- Supports theme customization via CSS variables, component variants with class-variance-authority, and composition patterns for extending components
- Provides UI blocks for common patterns like authentication forms, dashboards, and sidebars; use MCP tools to discover, retrieve, and install components and blocks
- Requires React 18+, Tailwind CSS 3.0+, and peer dependencies managed automatically via
npx shadcn@latest addor manual installation
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_componentsto see the complete catalog - Get component metadata: Use
get_component_metadatato understand props, dependencies, and usage
More from google-labs-code/stitch-skills
react:components
Converts Stitch designs into modular Vite and React components using system-level networking and AST-based validation.
43.7Kdesign-md
Analyze Stitch projects and synthesize a semantic design system into DESIGN.md files
43.2Kenhance-prompt
Transforms vague UI ideas into polished, Stitch-optimized prompts. Enhances specificity, adds UI/UX keywords, injects design system context, and structures output for better generation results.
39.1Kstitch-loop
Teaches agents to iteratively build websites using Stitch with an autonomous baton-passing loop pattern
38.8Kremotion
Generate walkthrough videos from Stitch projects using Remotion with smooth transitions, zooming, and text overlays
25.3Kstitch-design
Unified entry point for Stitch design work. Handles prompt enhancement (UI/UX keywords, atmosphere), design system synthesis (.stitch/DESIGN.md), and high-fidelity screen generation/editing via Stitch MCP.
24.1K