shadcn-ui

name	shadcn-ui
description	Deep expertise on shadcn/ui component library including installation, customization, theming, and accessibility patterns. Use when building UI with shadcn/ui components, integrating Radix UI primitives, configuring Tailwind CSS v4 themes, or implementing dark mode. Covers Next.js App Router, Pages Router, and Vite setups.
license	MIT
metadata	{"author":"google-labs-code","version":"1.0.0","source":"google-labs-code/stitch-skills"}
verified	true
lastVerifiedAt	"2026-02-22T00:00:00.000Z"
version	1.0.0
tools	["Read","Write","Edit","Bash","Glob","Grep"]
source	builtin
trust_score	100
provenance_sha	f3f15cbc4a532e6b

shadcn/ui Expert

Comprehensive guide to building UIs with shadcn/ui -- the copy-paste component library built on Radix UI primitives and Tailwind CSS. Components are not installed as a dependency; they are copied into your project for full ownership and customization.

When to Apply

Use this skill when:

• Adding shadcn/ui components to a React or Next.js project
• Customizing component styles, variants, or behavior
• Setting up Tailwind CSS v4 theming with CSS variables
• Implementing dark mode with shadcn/ui
• Building accessible forms, dialogs, or data tables
• Choosing between shadcn/ui components and custom implementations

Core Concepts

shadcn/ui is NOT a Component Library

shadcn/ui is a collection of reusable components that you copy into your project. Key differences from traditional libraries:

• No npm package dependency -- components live in your codebase
• Full ownership -- modify any component freely
• Radix UI primitives -- accessible, unstyled headless components under the hood
• Tailwind CSS -- all styling via utility classes and CSS variables
• CLI-driven -- npx shadcn@latest add button copies component code

Architecture

Your Project
  components/
    ui/              <- shadcn/ui components live here
      button.tsx
      dialog.tsx
      input.tsx
      ...
  lib/
    utils.ts         <- cn() utility (clsx + tailwind-merge)

Setup

Next.js App Router (Recommended)

# Initialize shadcn/ui in existing Next.js project
npx shadcn@latest init

# This creates:
# - components.json (configuration)
# - lib/utils.ts (cn utility)
# - Tailwind CSS variable theme in globals.css

components.json Configuration:

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",