Shadcn Ui

Critical Rules

• shadcn/ui is not an npm UI package; components are copied into your project.
• Configure path alias support (@/*) before using generated imports.
• Ensure Tailwind CSS and required Radix dependencies are installed.
• Add "use client" for interactive components in Next.js App Router.
• Prefer component variant props and utility classes over ad-hoc styling overrides.
• Keep form validation schema-driven (Zod) and connected with resolver-based form state.

Quick Start Commands

# New app
npx create-next-app@latest my-app --typescript --tailwind --eslint --app
cd my-app
npx shadcn@latest init
npx shadcn@latest add button input form card dialog select

# Existing app
npm install tailwindcss-animate class-variance-authority clsx tailwind-merge lucide-react
npx shadcn@latest init

Reference Map

Read supporting files based on task scope:

• Setup and configuration: references/SETUP_AND_CONFIGURATION.md
  • Initialization, dependency matrix, tsconfig/Tailwind/CSS variable setup, warnings.
• Component implementation details: references/COMPONENT_PATTERNS.md
  • Buttons, inputs, forms, cards, dialogs, sheets, navigation, table, toast, charts, customization, best practices.
• Next.js-specific patterns: references/NEXTJS_INTEGRATION.md
  • App Router, layout integration, server components, route handlers, server actions, metadata, fonts.
• Examples and recipes: references/EXAMPLES_AND_RECIPES.md
  • End-to-end examples, multi-field forms, and common composition patterns.
• Advanced installation patterns: references/CLI_ADVANCED.md
  • Multi-namespace installs, monorepo workflows, CLI flags, and troubleshooting.
• Registry configuration: references/REGISTRY_SETUP.md
  • Registry schemas, custom styles, plugin config, and secure registry auth setup.
• Supplemental references already in this skill:
  • references/reference.md
  • references/ui-reference.md
  • references/chart.md
  • references/learn.md

Common Patterns (Fast Paths)

When you have a specific UI pattern in mind, use these guides:

• Login/Sign-up forms: Start with references/COMPONENT_PATTERNS.md (inputs, forms, buttons) → then references/EXAMPLES_AND_RECIPES.md for complete form examples
• Data tables: references/COMPONENT_PATTERNS.md (table section) → references/EXAMPLES_AND_RECIPES.md for table patterns
• Navigation/menus: references/COMPONENT_PATTERNS.md (navigation section) → examples
• Modal dialogs: references/COMPONENT_PATTERNS.md (dialogs) → examples
• Customizing colors/theme: references/SETUP_AND_CONFIGURATION.md (CSS variables) → references/NEXTJS_INTEGRATION.md if using Next.js
• Advanced features (CLI, registries, plugins): references/CLI_ADVANCED.md or references/REGISTRY_SETUP.md

Minimal Implementation Checklist

• Install required components and dependencies.
• Confirm aliases and styling pipeline compile correctly.
• Build UI with composable primitives from @/components/ui.
• Use RHF + Zod for forms and error messages.
• Verify dark mode and CSS variable theme behavior.
• Validate accessibility before completion.

External References

• Official Docs: https://ui.shadcn.com
• Radix UI: https://www.radix-ui.com
• React Hook Form: https://react-hook-form.com
• Zod: https://zod.dev
• Tailwind CSS: https://tailwindcss.com
• Examples: https://ui.shadcn.com/examples