ShadCN Component Workflow

When creating new UI components, use ShadCN UI as the component library. Never manually copy ShadCN component code—always install via the CLI.

Workflow

1. •Identify needed ShadCN primitives from ui.shadcn.com/docs/components
2. •Install via CLI before writing component code:

npx shadcn@latest add <component-name>

Add multiple components in one command:

npx shadcn@latest add button input label

1. •Import from the project alias (configured in components.json):

import { Button } from "~/components/ui/button";
import { Input } from "~/components/ui/input";

1. •Build your component using the installed primitives. Use the cn() utility for merging class names:

import { cn } from "~/lib/utils";

Common Component Mappings

Rules

• •Always run npx shadcn@latest add <component> before using a ShadCN component in code
• •Use ~/components/ui/<component> import path (React Router / project alias)
• •Use cn() from ~/lib/utils for conditional class merging
• •Check components.json for project-specific aliases if imports fail