Agentient 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 ( {user.name} {user.email} {user.bio} Edit Profile ); } ```
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