Inbox sidebarPro

• 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:

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

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

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: Process a focused inbox with archive, snooze, and restore actions.
• Sidebar: Workspace: A product sidebar with a workspace switcher, live search, draggable favorites, and inline projects.
• Sidebar: App rail: An app shell whose sidebar folds into an icon rail and slides in as a sheet on phones.
• Notification center: A home for updates with read state, grouped information, and animated disclosure.
• Swipe actions: Reveal row actions with a swipe, or from the same actions in a menu.