# Shadcn Component Scaffolding

> shadcn/ui CLI usage, component installation, composition patterns, and file ownership philosophy. Keywords: "add component", "install shadcn", "scaffold", "cli", "components.json"

- Skill: `agentient/shadcn-component-scaffolding-2` (Agent Skill)
- Install (CLI): `npx skillmds@latest add agentient/shadcn-component-scaffolding-2`
- Raw SKILL.md: https://api.skillmd.com/api/skills/agentient/shadcn-component-scaffolding-2/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: Agentient (https://skillmd.com/u/agentient)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/agentient/shadcn-component-scaffolding-2

---


# shadcn/ui Component Scaffolding

## Overview

shadcn/ui is a collection of re-usable components that you copy into your project. Unlike traditional component libraries, you own the code.

## CLI Usage (MANDATORY)

**ONLY way to add components**:

\`\`\`bash
npx shadcn-ui@latest add button dialog card
\`\`\`

**Why CLI only**:
- Resolves dependencies automatically
- Updates components.json
- Installs peer packages
- Ensures correct configuration

## Component Composition

Most shadcn/ui components are composed of multiple parts:

\`\`\`tsx
import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
} from '@/components/ui/card';

function ProfileCard({ user }) {
  return (
    <Card>
      <CardHeader>
        <CardTitle>{user.name}</CardTitle>
        <CardDescription>{user.email}</CardDescription>
      </CardHeader>
      <CardContent>
        <p>{user.bio}</p>
      </CardContent>
      <CardFooter>
        <Button>Edit Profile</Button>
      </CardFooter>
    </Card>
  );
}
\`\`\`

## File Ownership

After installation, the component source code is in your project at \`src/components/ui/[component].tsx\`. You can:
- Modify the code freely
- Add custom variants
- Change styling
- Extend functionality

## Anti-Patterns

❌ \`npm install @shadcn/ui\` - Not distributed as package
❌ Manually copying from website - Bypasses dependency checks
❌ Importing from non-existent package

✅ Always use: \`npx shadcn-ui@latest add [component]\`

---

**Token Estimate**: ~1,500 tokens