Labsco
google-labs-code logo

shadcn-ui

★ 6,391

by google-labs-code · part of google-labs-code/stitch-skills

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

🔥🔥🔥🔥✓ VerifiedFreeQuick setup
#git
🧩 One of 7 skills in the google-labs-code/stitch-skills package — works on its own, and pairs well with its siblings.

This is the playbook your agent receives when the skill activates — you don't need to read it to use the skill, but it's here to audit before installing.

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 Architecture

File Structure

src/
├── components/
│   ├── ui/              # shadcn components
│   │   ├── button.tsx
│   │   ├── card.tsx
│   │   └── dialog.tsx
│   └── [custom]/        # your composed components
│       └── user-card.tsx
├── lib/
│   └── utils.ts         # cn() utility
└── app/
    └── page.tsx

The cn() Utility

All shadcn components use the cn() helper for class merging:

import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

This allows you to:

  • Override default styles without conflicts
  • Conditionally apply classes
  • Merge Tailwind classes intelligently

Customization Best Practices

1. Theme Customization

Edit your Tailwind config and CSS variables in app/globals.css:

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --primary: 221.2 83.2% 53.3%;
    /* ... more variables */
  }
  
  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    /* ... dark mode overrides */
  }
}

2. Component Variants

Use class-variance-authority (cva) for variant logic:

import { cva } from "class-variance-authority"

const buttonVariants = cva(
  "inline-flex items-center justify-center rounded-md",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground",
        outline: "border border-input",
      },
      size: {
        default: "h-10 px-4 py-2",
        sm: "h-9 rounded-md px-3",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)

3. Extending Components

Create wrapper components in components/ (not components/ui/):

// components/custom-button.tsx
import { Button } from "@/components/ui/button"
import { Loader2 } from "lucide-react"

export function LoadingButton({ 
  loading, 
  children, 
  ...props 
}: ButtonProps & { loading?: boolean }) {
  return (
    <Button disabled={loading} {...props}>
      {loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
      {children}
    </Button>
  )
}

Blocks and Complex Components

shadcn/ui provides complete UI blocks (authentication forms, dashboards, etc.):

  1. List available blocks: Use list_blocks with optional category filter
  2. Get block source: Use get_block with the block name
  3. Install blocks: Many blocks include multiple component files

Blocks are organized by category:

  • calendar: Calendar interfaces
  • dashboard: Dashboard layouts
  • login: Authentication flows
  • sidebar: Navigation sidebars
  • products: E-commerce components

Accessibility

All shadcn/ui components are built on Radix UI primitives, ensuring:

  • Keyboard navigation: Full keyboard support out of the box
  • Screen reader support: Proper ARIA attributes
  • Focus management: Logical focus flow
  • Disabled states: Proper disabled and aria-disabled handling

When customizing, maintain accessibility:

  • Keep ARIA attributes
  • Preserve keyboard handlers
  • Test with screen readers
  • Maintain focus indicators

Common Patterns

Form Building

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

// Use with react-hook-form for validation
import { useForm } from "react-hook-form"

Dialog/Modal Patterns

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"

Data Display

import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"

Validation and Quality

Before committing components:

  1. Type check: Run tsc --noEmit to verify TypeScript
  2. Lint: Run your linter to catch style issues
  3. Test accessibility: Use tools like axe DevTools
  4. Visual QA: Test in light and dark modes
  5. Responsive check: Verify behavior at different breakpoints

Resources

Refer to the following resource files for detailed guidance:

  • resources/setup-guide.md - Step-by-step project initialization
  • resources/component-catalog.md - Complete component reference
  • resources/customization-guide.md - Theming and variant patterns
  • resources/migration-guide.md - Upgrading from other UI libraries

Examples

See the examples/ directory for:

  • Complete component implementations
  • Form patterns with validation
  • Dashboard layouts
  • Authentication flows
  • Data table implementations