shadcn

Overview

What is shadcn?

shadcn is a toolkit for managing, composing, and customizing React UI components styled with Tailwind CSS. It enables developers and designers to add high-quality, reusable UI elements directly into their projects, supporting rapid interface development and consistent design systems.

Who is shadcn for?

shadcn is designed for frontend developers, UI engineers, and teams building React applications who want to:

• Quickly add and customize UI components
• Maintain visual consistency with Tailwind CSS
• Extend or compose components for unique project needs
• Avoid reinventing common UI patterns

What problems does shadcn solve?

• Simplifies adding and updating UI components as source code
• Provides a searchable registry of components and presets
• Offers clear documentation and usage examples for each component
• Supports project-specific configuration via components.json

How to Use

Installation Steps

1. Add shadcn to your project:
   Use your preferred package runner. For example, with npm:

   npx shadcn@latest init
   

   Or with pnpm:

   pnpm dlx shadcn@latest init
   

   Or with bun:

   bunx --bun shadcn@latest init
   

2. Configure your project:
   Follow the CLI prompts to set up your project and generate a components.json file.
3. Add components:
   Search and add components from the registry:

   npx shadcn@latest add button
   

   Replace button with any available component name.
4. Customize and compose:
   • Use built-in variants and sizes for quick styling.
   • Compose components (e.g., Tabs + Card + Form) for complex layouts.
   • Extend or style components using Tailwind CSS as needed.

Project Files and Structure

• components.json: Tracks installed components and configuration.
• Source code for each component is added directly to your project, allowing full customization.

Documentation and Examples

• Get docs and usage examples for any component:

  npx shadcn@latest docs <component>
  

• Review the shadcn/ui GitHub repository for more details.

FAQ

When should I use shadcn?

Use shadcn when you need to quickly scaffold, customize, or extend UI components in a React project, especially if you use Tailwind CSS and value source-based, editable components.

What projects is shadcn not a good fit for?

shadcn is less suitable for non-React projects, or if you require a fully managed component library without source code integration. It is also not intended for backend or non-UI work.

How do I update or remove components?

• Update: Run the add command again for the latest version.
• Remove: Delete the component files from your project and update components.json accordingly.

Where can I find more help?

• Check the shadcn/ui documentation
• Use the CLI help: npx shadcn@latest --help

For a full file tree and advanced usage, explore the repository or open the Files tab in your agent skills directory.