Components•Inbox
Components•Inbox
Inbox
A three-pane mail client: folders and labels, a searchable thread list with multi-select and bulk actions, and a reader with folded older messages and an inline reply. Archive and delete offer undo. It is fully keyboard-driven (J and K to move, E to archive, S to star, ? for the rest), and on narrow containers the panes collapse to a list that opens into the reader.
Dependencies
Copy below cli
npx shadcn@latest add https://ui.isaiahbjork.com/app-inbox.jsonHow to use
import { AppInbox, type InboxThread } from "@/components/bjork-ui/blocks/app-inbox";const threads: InboxThread[] = [ { id: "t1", subject: "Revenue chart feedback", folder: "inbox", labels: ["design"], unread: true, messages: [ { id: "m1", from: { name: "Maren Okafor", email: "maren@fieldnote.studio" }, date: "2026-10-08T09:12:00Z", body: "Four of five people read the dashed line as a forecast.", }, ], },];export function Mail() { return ( <div className="h-dvh"> <AppInbox threads={threads} labels={[{ id: "design", name: "Design", color: "#ec7d43" }]} me={{ name: "Rhea Castillo", email: "rhea@halcyon.app" }} onReply={(threadId, body) => fetch(`/api/threads/${threadId}/reply`, { method: "POST", body })} onThreadChange={(thread) => fetch(`/api/threads/${thread.id}`, { method: "PATCH", body: JSON.stringify(thread) })} /> </div> );}
Inbox
2 new1 of 9
Revenue chart: the comparison line is confusing people
- Design
- Customers
One more: two people hovered the chart and expected the KPI cards above it to update to the hovered day. Might be worth a prototype.
The Figma file has three variants. My vote is v3.
⌘↵to send
New message
⌘↵
Keyboard shortcuts
They work anywhere in the inbox except while you're typing.
- J
- Older conversation
- K
- Newer conversation
- ↑↓
- Move through the list
- E
- Archive
- #
- Move to trash
- S
- Star
- U
- Mark as unread
- X
- Select
- R
- Reply
- C
- Compose
- Z
- Undo
- /
- Search
- Esc
- Clear selection or go back