# Shadcn UI CLI

> Install and manage Shadcn UI components using the CLI.

*Canonical: https://makerkit.dev/docs/nextjs-prisma/ui-components/shadcn-cli*

---

Add new shadcn/ui components to MakerKit by running `pnpm dlx shadcn@latest add <component>` from the `packages/ui` directory. After installation, replace TSconfig path aliases with internal imports (`#components/...`) due to monorepo limitations.

This guide is part of the [UI Components](./overview) documentation.

The Shadcn CLI is a command-line tool that installs pre-built React components from the shadcn/ui library into your project as source code, allowing full customization.

## Installation Directory

Components are installed in the `packages/ui` package. Always run Shadcn CLI commands from within this directory:

```bash
cd packages/ui
```

## Adding Components

Use the Shadcn CLI to add components:

```bash
pnpm dlx shadcn@latest add <component-name>
```

For example, to add a calendar component:

```bash
pnpm dlx shadcn@latest add calendar
```

Components will be placed in `packages/ui/src/shadcn`.

## Switching Shadcn UI theme

To switch to a supported Shadcn UI theme, edit the `packages/ui/components.json` configuration file with the theme you wish to use, for example `base-vega`:

```json
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "base-vega",
  ...
}
```

Run the command:

Move to the folder `packages/ui`:

```bash
cd packages/ui
```

And re-add all the Shadcn UI components using the new theme:

```bash
pnpm exec shadcn add --all --yes
```

Format files from the root folder to ensure these files use the same format as the rest of the codebase:

```bash
cd ../../
pnpm format:fix
```

## Common Commands

```bash
# Add a single component
pnpm dlx shadcn@latest add button

# Add multiple components
pnpm dlx shadcn@latest add button card dialog

# List available components
pnpm dlx shadcn@latest add

# Update existing components
pnpm dlx shadcn@latest add button --overwrite
```

## After Installation

After adding a new component, you can import it in your application:

```typescript
import { Calendar } from '@kit/ui/calendar';
```

The `@kit/ui` package re-exports components for consistent imports across the monorepo.

## Common Pitfalls

- **Running CLI from wrong directory**: Always `cd packages/ui` before running shadcn commands. Running from root installs to wrong location.
- **Overwriting customized components**: Using `--overwrite` flag removes your customizations. Back up changes before updating.
- **Missing dependencies**: Some components require additional packages. Check the shadcn docs for peer dependencies like `date-fns` for Calendar.
- **Forgetting to export**: New components need to be re-exported from `@kit/ui`. Add export in the package's index file.

---

**Next:** [Forms & Inputs →](./forms-and-inputs)