# Inbox sidebar

> A mail sidebar whose Compose button grows into a composer and whose folders take dropped mail.

- Page: https://ui.xzero.co.uk/components/blocks/inbox-sidebar

## Variant: Inbox

A mail sidebar whose Compose button grows into a composer and whose folders take dropped mail.

- Access: Xzero Pro
- Registry id: `inbox-sidebar`
- Source file: `registry/blocks/inbox-sidebar/inbox-sidebar.tsx`
- Built from: Avatar, Animated counter, Tooltip, Button
- Keywords: react email client, inbox ui, mail sidebar, gmail clone, drag to folder, compose window, mail app layout

Use this as the shell of a mail or messaging app. Load folders, labels, and messages from your mail API, persist moves and stars through it, and connect Send and drafts to your outbox; sending and saving in the preview are simulated.

### When to use

- The shell of a mail or messaging app.
- Inboxes where messages are dragged onto folders.
- Mail clients with row quick actions and a compose window.

### When not to use

- Use inbox-triage for a focused one-at-a-time triage flow.
- Use notification-center for app notifications.
- Use workspace-sidebar for general app navigation.

## Installation

Register both Xzero UI namespaces in your project's components.json:

```json
{
  "registries": {
    "@xzero-ui": "https://mcp.xzero.co.uk/r/{name}.json",
    "@xzero-ui-pro": "https://mcp.xzero.co.uk/r/pro/{name}.json"
  }
}
```

```bash
npx shadcn@4.23.0 add @xzero-ui-pro/inbox-sidebar
```

Install xzero-foundation once, and import @/components/xzero/foundation.css in your app root. No Xzero token is used by this snapshot. For sample portraits, photos, fonts, or logos, download https://mcp.xzero.co.uk/install-assets.mjs and run node xzero-install-assets.mjs <receiving-project>.

### Usage

```tsx
import { InboxSidebar } from "@/components/xzero/blocks/inbox-sidebar/inbox-sidebar";

export default function MailPage() {
  return (
    <InboxSidebar
      onCollapsedChange={(collapsed) => localStorage.setItem("mail-rail", String(collapsed))}
    />
  );
}
```

### API reference

#### InboxSidebar

A mail shell with folders, labels, a message list you can drag onto folders, row quick actions, and a Compose button that grows into a composer. Folders, messages, and sending are simulated.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `defaultCollapsed` | `boolean` | `false` | Start with the sidebar collapsed to its icon rail. |
| `onCollapsedChange` | `(collapsed: boolean) => void` | – | Called when the sidebar collapses or expands, from the toggle or the [ shortcut. |

### Keyboard interactions

| Keys | Action |
| --- | --- |
| [ | Toggles the icon rail when focus is not in a text field, menu, or dialog. |
| E | On a message row, archives or moves it with its quick action. |
| S | On a message row, toggles the star. |
| Cmd/Ctrl+Enter | Sends from the composer. |
| Escape | Closes the composer and saves a draft, or cancels a drag in progress. |

### Accessibility

- The composer is a role="dialog" labelled by its title.
- Moves, stars, and sends are announced through a polite status region, and rail icons have tooltips.
- Every drag action has a keyboard or menu alternative.

### Motion

- Compose grows into the composer through a shared layoutId, and unread counts roll.
- Dropped messages leave the list with layout animation while the target folder pulses.
- Reduced motion makes the morph and list changes instant.

### Responsive behavior

- Below 720px container width the sidebar is locked to its 64px icon rail; below 420px row labels are hidden.
- Dragging to folders works with a mouse only; touch uses the row menu and quick actions.

### Performance

- The shell is a fixed 660px tall and the message list is not virtualized; page long mailboxes.
- Sidebar width springs through one motion value, and a ResizeObserver detects the narrow layout.

### Notes for AI

- Use as the shell of a mail or messaging app.
- Load folders, labels, and messages from your mail API, persist moves and stars through it, and connect Send and drafts to your outbox.
- Composes Xzero avatar, animated-counter, tooltip, and button.

### Related

- [Inbox triage](https://ui.xzero.co.uk/components/blocks/inbox-triage/markdown): Process a focused inbox with archive, snooze, and restore actions.
- [Sidebar: Workspace](https://ui.xzero.co.uk/components/blocks/workspace-sidebar/markdown): A product sidebar with a workspace switcher, live search, draggable favorites, and inline projects.
- [Sidebar: App rail](https://ui.xzero.co.uk/components/blocks/workspace-sidebar/markdown): An app shell whose sidebar folds into an icon rail and slides in as a sheet on phones.
- [Notification center](https://ui.xzero.co.uk/components/blocks/notification-center/markdown): A home for updates with read state, grouped information, and animated disclosure.
- [Swipe actions](https://ui.xzero.co.uk/components/swipe-actions/markdown): Reveal row actions with a swipe, or from the same actions in a menu.