shadcn

Topics in the source

• shadcn/ui
• When to Use
• Current Project Context
• Principles
• Critical Rules
• Styling & Tailwind → styling.md
• Forms & Inputs → forms.md
• Component Structure → composition.md

A framework for building ui, components and design systems. Components are added as source code to the user's project via the CLI. IMPORTANT: Run all CLI commands using the project's package runner: npx shadcn@latest, pnpm dlx shadcn@latest, or bunx --bun shadcn@latest — based on the project's packageManager. Examples below use npx shadcn@latest but substitute the correct runner for the project. Use when adding new components from shadcn/ui or community registries. Use when styling, composing, or debugging existing shadcn/ui components. Use when initializing a new project or switching design system presets. Use to retrieve component documentation, examples, and API references. The JSON above contains the project config and installed components. Use npx shadcn@latest docs to get documentation and example URLs for any component. 1. Use existing components first. Use npx shadcn@latest search to check registries before writing custom UI. Check community registries too. 2. Compose, don't reinvent. Settings page = Tabs + Card + form controls. Dashboard = Sidebar + Card + Chart + Table. 3. Use built-in variants before custom styles. variant="outline", size="sm", etc. 4. Use semantic color

This is an excerpt. Refer to the complete source and its current requirements.