# Component Patterns
## Card Structure
Standard grouping pattern: `Card > CardHeader + CardContent`.
```tsx
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
Section Title
{/* content */}
```
## KPI / Stat Cards — Use py-0
Stat grid cards use `py-0` so vertical rhythm is controlled by the parent grid, not the card itself.
```tsx
// CORRECT
Active Agents
4
// WRONG — default py-6 causes excessive padding in stat grids
```
## Sidebar Navigation
Width: `w-64` (256px). Background: `bg-muted/30`. Right border: `border-r`.
```tsx
```
## ScrollArea for Overflow
Any list that can overflow must use `ScrollArea` (not `overflow-y-auto` directly).
```tsx
import { ScrollArea } from "@/components/ui/scroll-area"
{items.map((item) => )}
```
## Status Badge with Dot
```tsx
Active
```
## Avatar Fallback Colors
Use orange tones for user/agent avatars:
```tsx
JD
```
## Action Buttons in Tables
Small ghost buttons for row actions:
```tsx
```