SidebarPro
App and docs sidebars: a folding rail, a workspace switcher, a mail shell, and a docs tree.
InboxA mail sidebar whose Compose button grows into a composer and whose folders take dropped mail.
- 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.
- 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
Pro source and install commands unlock with a Pro plan.
Usage
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.
import { InboxSidebar } from "@/registry/blocks/inbox-sidebar/inbox-sidebar"; export default function MailPage() { return ( <InboxSidebar onCollapsedChange={(collapsed) => localStorage.setItem("mail-rail", String(collapsed))} /> );}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.
defaultCollapsedbooleanfalseStart 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.- [
- 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.
- 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.
- 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.
- 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.
- 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
Give your coding assistant the Markdown reference instead of screenshots.
- 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 Arc avatar, animated-counter, tooltip, and button.
The full library index for assistants is at /llms.txt.
