shadcnlisted

# shadcn/ui Development Guidelines Best practices for using shadcn/ui components with Tailwind CSS and Radix UI primitives. ## Core Principles 1. **Copy, Don't Install**: Components are copied to your project, not installed as dependencies 2. **Customizable**: Modify components directly in your codebase 3. **Accessible**: Built on Radix UI primitives with ARIA support 4. **Type-Safe**: Full TypeScript support 5. **Composable**: Build complex UIs from simple primitives ## Installation ### Initial Setup ```bash npx shadcn@latest init ``` ### Add Components ```bash # Add individual components npx shadcn@latest add button npx shadcn@latest add form npx shadcn@latest add dialog # Add multiple npx shadcn@latest add button card dialog ``` ### Troubleshooting #### npm Cache Errors (ENOTEMPTY) If `npx shadcn@latest add` fails with npm cache errors like `ENOTEMPTY` or `syscall rename`: **Solution 1: Clear npm cache** ```bash npm cache clean --force npx shadcn@latest add table ``` **Solution 2: Use pnpm (recommended)** ```bash pnpm dlx shadcn@latest add table ``` **Solution 3: Use yarn** ```bash yarn dlx shadcn@latest add table ``` **Solution 4: Manual component installation** Visit the [shadcn/ui documentation](https://ui.shadcn.com/docs/components) for the specific component and copy the code directly into your project. ## Component Usage ### Button & Card ```typescript import { Button } from '@/components/ui/button'; import { Card, CardHeader, CardTitle, CardDescr