About this block

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.

When to use

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

• Nothing, shells are the page

After

• Inbox and email
• Activity feed

What you can display

One strong use is the team mailbox with folders and a reading pane. Other triage contexts:

• Support queue. Status folders on the left, ticket list in the middle, conversation in the reading pane.
• Notification center. Category folders, event list with unread dots, and a detail panel per event.
• Review inbox. Pending, changes requested, and approved folders over a list of items awaiting action.

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.