shadcn-ui

Installation
Summary

Complete guide to building accessible React components with shadcn/ui, Radix UI, and Tailwind CSS.

  • Install and configure components via CLI (npx shadcn@latest add), then customize directly in your project since you own the code
  • Covers 10+ core components: buttons, inputs, forms with Zod validation, cards, dialogs, dropdowns, sheets, tables, toasts, and charts built on Recharts
  • Full Next.js App Router integration with Server Components, form handling, and metadata support; all components use "use client" directive
  • Theme with CSS variables for light/dark modes; extend Tailwind config for custom colors, spacing, and animations
SKILL.md

shadcn/ui Component Patterns

Build accessible, customizable UI components with shadcn/ui, Radix UI, and Tailwind CSS.

Overview

  • Components are copied into your project — you own and customize the code
  • Built on Radix UI primitives for full accessibility
  • Styled with Tailwind CSS and CSS variables for theming
  • CLI-based installation: npx shadcn@latest add <component>

When to Use

Installs
18.5K
GitHub Stars
291
First Seen
Jan 20, 2026
shadcn-ui — giuseppe-trisciuoglio/developer-kit