Github

Installation

PreviousNext

How to install dependencies and structure your app.

Adding Components

You can add components automatically with the shadcn CLI or manually by copying the files.

With the CLI

Each component page provides a command to add it to your project automatically. The CLI will create the necessary files and install any dependencies for you.

For new projects, use the herocn style preset to initialize everything in one command:

pnpm dlx shadcn@latest init https://herocn.dev/r/style.json

This installs all UI components and the color system.

Existing Projects

To add components to an existing project:

pnpm dlx shadcn@latest add https://herocn.dev/r/ui.json

This adds all UI primitives (button, card, avatar, dialog, tabs, and more). For the full theme including colors, sidebar, and fonts:

pnpm dlx shadcn@latest add https://herocn.dev/r/style.json

This installs all UI components and the color system (it might override your colors)

Manually

  1. Find a component on the Components.
  2. Copy the code from the Code tab.
  3. Create a new file in your project (e.g., components/ui/button.tsx) and paste the code.
  4. Install any dependencies listed on the component's page.
  5. Import and use the component in your app.