Shadcn UI 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.

Important: Fix Import Paths

Due to limitations in both Turborepo and Shadcn CLI, you must replace TSconfig path aliases with relative imports or Node.js-style internal imports after installing a component or copying it from the Shadcn UI website.

For example, change:

// Before (won't work in monorepo)
import { Button } from "@components/button";
import { cn } from "@lib/utils";

To:

// After (use relative or internal imports)
import { Button } from "#components/button.tsx";
import { cn } from "#lib/utils.ts";

Configuration

The Shadcn UI configuration is located at packages/ui/components.json:

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "base-vega",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "iconLibrary": "lucide",
  "aliases": {
    "components": "@/components",
    "utils": "#utils",
    "ui": "src/shadcn",
    "lib": "#lib",
    "hooks": "#hooks"
  }
}

Configuration Details

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.
• Not fixing import paths: Shadcn generates @/components aliases that don't work in monorepos. Replace with #components/ internal imports.
• 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 →