shadcn-components

# shadcn/ui Component Usage

Guide for using, customizing, and composing shadcn/ui components in React applications.

## Adding Components

### CLI Installation

```bash
# Add single component
npx shadcn@latest add button

# Add multiple components
npx shadcn@latest add button card dialog input

# Add with dependencies
npx shadcn@latest add form  # Adds form + label + input
```

### Manual Installation

Components can be copied directly from https://ui.shadcn.com/docs/components

## Component Categories

### Form Components

| Component | Use Case |
|-----------|----------|
| `input` | Text input fields |
| `textarea` | Multi-line text |
| `select` | Dropdown selection |
| `checkbox` | Boolean toggle |
| `radio-group` | Single selection from options |
| `switch` | On/off toggle |
| `slider` | Range selection |
| `form` | Form validation wrapper |

### Layout Components

| Component | Use Case |
|-----------|----------|
| `card` | Content container |
| `separator` | Visual divider |
| `aspect-ratio` | Fixed aspect container |
| `scroll-area` | Custom scrollbars |
| `resizable` | Resizable panels |

### Feedback Components

| Component | Use Case |
|-----------|----------|
| `alert` | Important messages |
| `badge` | Status indicators |
| `progress` | Loading progress |
| `skeleton` | Loading placeholders |
| `toast/sonner` | Notifications |

### Overlay Components

| Component | Use Case |
|-----------|----------|
| `dialog` | Modal windows |
| `alert-dialog` | Confirmation dialogs |
| `sheet` | Side panels |
| `drawer` | Bottom/side drawers |
| `popover` | Floating content |
| `tooltip` | Hover information |
| `hover-card` | Rich hover content |

### Navigation Components

| Component | Use Case |
|-----------|----------|
| `tabs` | Tabbed interfaces |
| `navigation-menu` | Main navigation |
| `breadcrumb` | Location breadcrumbs |
| `pagination` | Page navigation |
| `command` | Command palette |
| `menubar` | Application menu |
| `context-menu` | Right-click menu |