Shadcn Ui
Skill Verified ActiveExpert guidance for integrating and building applications with shadcn/ui components, including component discovery, installation, customization, and best practices.
To enable developers to efficiently integrate, customize, and build applications using shadcn/ui components by providing expert guidance and practical tooling.
Features
- Component discovery and installation
- Project setup and configuration
- Theme and component customization
- Integration with shadcn MCP tools
- Usage examples and best practices
Use Cases
- Integrating shadcn/ui into a new or existing React project
- Discovering and installing specific shadcn/ui components
- Customizing component appearance and behavior
- Building complex UI elements like forms and data tables with shadcn/ui
Non-Goals
- Providing a component library that lives in node_modules
- Replacing the need for React, Tailwind CSS, or Node.js
- Offering guidance on aspects outside of shadcn/ui integration
Installation
npx skills add google-labs-code/stitch-skillsRuns the Vercel skills CLI (skills.sh) via npx — needs Node.js locally and at least one installed skills-compatible agent (Claude Code, Cursor, Codex, …). Assumes the repo follows the agentskills.io format.
Quality Score
VerifiedTrust Signals
Similar Extensions
Shadcn/ui Component Library
99shadcn/ui component library for React with Tailwind CSS - copy-paste accessible components with full code ownership
UI UX Pro Max Skill
98Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.
UI Styling Skill
95Style UIs with shadcn/ui components (Radix UI + Tailwind CSS). Use for accessible components, themes, dark mode, responsive layouts, design systems, color customization.
Setup Tailwind Typescript
100Configure Tailwind CSS with TypeScript in a Next.js or React project. Covers installation, configuration, custom theme extensions, component patterns, and type-safe styling utilities. Use when adding Tailwind CSS to an existing TypeScript project, customizing the Tailwind theme for a project's design system, setting up type-safe component styling patterns, or configuring Tailwind plugins and extensions.
Sentry React Router Framework Sdk
100Full Sentry SDK setup for React Router Framework mode. Use when asked to "add Sentry to React Router Framework", "install @sentry/react-router", or configure error monitoring, tracing, profiling, session replay, logs, or user feedback for a React Router v7 framework app.
React Modernization
99Upgrade React applications to latest versions, migrate from class components to hooks, and adopt concurrent features. Use when modernizing React codebases, migrating to React Hooks, or upgrading to latest React versions.