Inbox Shell
Three pane mail shell with a labeled folder sidebar, an unread message list, and a reading pane with triage actions and a reply footer.
Three pane mail shell with a labeled folder sidebar, an unread message list, and a reading pane with triage actions and a reply footer.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Inbox Shell is the three pane mail frame: a labeled folder sidebar on the far left (Inbox active with a count of 12, plus Flagged, Snoozed, Sent, Archive, and Spam) under a Compose button, a 80-wide message list of five threads with unread dots and snippet previews, and a wide reading pane that opens on the active message. The list leads with Maya Chen on Q3 budget review, unread and highlighted, followed by Jordan Lee, Priya Nair, Noah Park, and Marcus Kim, each row carrying the sender avatar, subject, snippet, and time.
Folders and messages are separate typed arrays with icon, label, and count on one side and sender, subject, snippet, unread, and avatar on the other. The reading pane pulls its header from the first message and pairs a triage toolbar (Archive, Delete, Flag, Snooze) up top with a Reply and Forward footer, so the shell has weight before any wiring.
Reach for this shell wherever the product triages a stream of messages against a folder taxonomy: a mailbox, a support queue, or a notification center. Wire aria-current on the folder and message rows to your router and replace the dashed body zone with the rendered message content.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the team mailbox with folders and a reading pane. Other triage contexts:
Tip: keep the folder and list panes fixed width and let only the reading pane scroll, so the message position stays stable while the user reads a long thread.