Shadcn UI CLI

Install and manage Shadcn UI components using the 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 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:

cd packages/ui

Adding Components

Use the Shadcn CLI to add components:

pnpm dlx shadcn@latest add <component-name>

For example, to add a calendar component:

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:

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

Run the command:

Move to the folder packages/ui:

cd packages/ui

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

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:

cd ../../
pnpm format:fix

Common Commands

# 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:

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 →