> ## Documentation Index
> Fetch the complete documentation index at: https://docs.evomarketing.co/llms.txt
> Use this file to discover all available pages before exploring further.

# Components

> UI component library and patterns

The frontend uses shadcn/ui components with Tailwind CSS styling.

## Component organization

```
components/
  ui/               # shadcn/ui primitives
  app-shell/        # Main layout
  team/             # Admin components
  creator/          # Creator components
  strategy/         # Strategy views
  metrics/          # Charts and analytics
```

## App Shell

**Directory:** `components/app-shell/`

### AppShell

Main layout wrapper providing:

* Collapsible sidebar
* Header with user menu
* Notification bell
* Global search

### Sidebar

Navigation sidebar with:

* Role-based menu items
* Collapsible groups
* Active state indicators

### Navigation items

**File:** `nav-items.ts`

```typescript theme={null}
export const adminNavItems = [
  { label: "Dashboard", href: "/team/dashboard", icon: Home },
  { label: "Brands", href: "/team/brands", icon: Building },
  // ...
];

export const creatorNavItems = [
  { label: "Dashboard", href: "/community/dashboard", icon: Home },
  // ...
];
```

### NotificationMenu

Bell icon with notification dropdown:

* Unread count badge
* Notification list
* Mark as read actions
* Real-time updates

### RealtimeSubscriptions

Global WebSocket subscriptions:

* Notification channel
* Query invalidation on updates

## UI Primitives

**Directory:** `components/ui/`

shadcn/ui components customized for EVO:

| Component           | Purpose             |
| ------------------- | ------------------- |
| `button.tsx`        | Action buttons      |
| `card.tsx`          | Content cards       |
| `dialog.tsx`        | Modal dialogs       |
| `dropdown-menu.tsx` | Dropdown menus      |
| `input.tsx`         | Text inputs         |
| `select.tsx`        | Select dropdowns    |
| `combobox.tsx`      | Searchable select   |
| `table.tsx`         | Data tables         |
| `tabs.tsx`          | Tab navigation      |
| `toast.tsx`         | Toast notifications |

### Combobox

<Warning>
  **Required for brand selection.** Never use plain `<Select>` for brands. Always use `<Combobox>` with search.
</Warning>

```typescript theme={null}
<Combobox
  options={brands.map(b => ({ value: b.id, label: b.name }))}
  value={selectedBrand}
  onChange={setSelectedBrand}
  placeholder="Search brands..."
/>
```

### SilentErrorBoundary

Wraps non-critical widgets:

```typescript theme={null}
<SilentErrorBoundary>
  <CreatorWidget />
</SilentErrorBoundary>
```

Catches errors without crashing the page.

## Team components

**Directory:** `components/team/`

### BrandPicker

Searchable brand selector:

* Combobox interface
* Recent brands
* All brands search

### CreatorCard

Creator display card:

* Avatar
* Name and tier
* Metrics summary
* Action buttons

### MetricCard

Metric display with:

* Label
* Value
* Trend indicator
* Sparkline (optional)

## Creator components

**Directory:** `components/creator/`

### DealCard

Brand deal display:

* Gamified design
* Prize podium
* Platform logos
* Apply button

### BrandHubCard

Brand hub entry card:

* Brand logo
* Progress bar
* Quick stats

### TierBadge

Creator tier indicator:

* Galaxy, Moonwalker, Rocket, Beginner
* Color-coded
* Icon variants

## Strategy components

**Directory:** `components/strategy/`

### StrategyDocument

Renders strategy content:

* Markdown parsing
* Embedded media
* Section navigation

### StrategyEditor

WYSIWYG editor for strategies:

* Rich text editing
* Image upload
* Preview mode

## Metrics components

**Directory:** `components/metrics/`

### Chart

Recharts wrapper:

* Line charts
* Bar charts
* Area charts
* Consistent styling

### MetricsOverview

Dashboard metrics display:

* Key metric tiles
* Time period selection
* Platform breakdown

## Styling patterns

### Tailwind utilities

```typescript theme={null}
import { cn } from "@/lib/utils";

<div className={cn(
  "rounded-lg border p-4",
  isActive && "border-primary",
  className
)}>
```

### CSS variables

Theme colors in `globals.css`:

```css theme={null}
:root {
  --evo-orange: #e16100;
  --evo-hunter: #414f47;
}
```

### Dark mode

CSS variables swap for dark mode:

```css theme={null}
.dark {
  --background: 0 0% 8%;
  --foreground: 0 0% 98%;
}
```

## Conventions

1. **Use `cn()` for class merging**
2. **Prefer composition over configuration**
3. **Colocate route components in `_components/`**
4. **Wrap non-critical widgets in error boundaries**