shadcn-ui_skill

This skill helps you discover, install, and customize shadcn/ui components in your project with best practices and zero runtime overhead.

TypeScript

2k

GitHub Stars

2

Bundled Files

2 months ago

Catalog Refreshed

4 months ago

First Indexed

Readme & install

Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.

Installation

Preview and clipboard use veilstrat where the catalogue uses aiagentskills.

npx veilstrat add skill google-labs-code/stitch-skills --skill shadcn-ui

README.md6.7 KB
SKILL.md9.0 KB

Overview

This skill provides expert guidance for integrating and building applications with shadcn/ui components. It helps developers discover components, install them correctly, and customize styling and behavior while preserving accessibility. The focus is practical, showing setup, theming, and composition patterns for TypeScript React projects.

How this skill works

The skill inspects shadcn/ui workflows: discovery (component and block catalogs), installation (CLI and manual), and project configuration (components.json, aliases, Tailwind). It explains required dependencies and shows how to copy components into src/components/ui, wire cn() utilities, and extend components in your app. It also highlights accessibility, testing, and common troubleshooting steps.

When to use it

Starting a new project and choosing shadcn visual styles and primitives
Adding a single component or a UI block to an existing TypeScript React app
Customizing component visuals, variants, or theme variables without a runtime library
Ensuring accessibility and keyboard behavior while modifying components
Migrating pieces of UI from other libraries into a Tailwind-based stack

Best practices

Prefer the npx shadcn add flow to copy component source into your codebase for full ownership
Keep shadcn/ui files in src/components/ui and create wrappers in src/components for app-specific behavior
Use the cn() helper with clsx and tailwind-merge to safely override classes and prevent conflicts
Manage variants with class-variance-authority (cva) and centralize Tailwind variables in globals.css
Preserve ARIA attributes, keyboard handlers, and focus styles when customizing for accessibility
Run tsc, lint, accessibility scans, and visual QA across light/dark and breakpoints before committing

Example use cases

Add a Dialog or Modal by installing the dialog component and its Radix primitives, then wrap it with app-specific triggers
Create a LoadingButton wrapper that composes the shadcn Button and adds a spinner and disabled state
Install a dashboard block to scaffold layouts and then customize cards and tables for your data model
Migrate a design system button into your app by copying files, adjusting Tailwind tokens, and using cva for variants
Build a responsive, accessible form using shadcn form components and react-hook-form for validation

FAQ

You need the primitives chosen for the component variant: either Radix UI or Base UI. The CLI adapts the component source to your choice and installs required peer dependencies.

Where should I put app-specific extensions?

Keep shadcn files in src/components/ui and place app-specific wrappers or composed components in src/components so updates remain manageable.

How do I change theme colors?

Edit CSS variables in globals.css and adjust Tailwind config tokens. Use the provided variable names and test light/dark modes to ensure visual consistency.