EmailThreeColumn
v1.0.25Updated 20 Oct 2026Classic three-column email layout: folders pane, message-list pane, reading pane. Resizable panels.
Preview
Live · 13 stories▸Why this is recommendedemailmailinboxthree-column+2
The default, out-of-the-box EmailThreeColumn.
- ✓Inbox-style email clients
- ✓Support ticket inbox
- ✓Notification mailbox
- Folders / labels pane
- Message list with sender + subject + preview + time
- Reading pane with full body
- Resizable panels (react-resizable-panels)
- Selection moves through list
- Unread / starred / important indicators
- Reply / forward action bar
- i18n (FB-18): uiLabels prop overrides every built-in string (chrome, placeholders, aria-labels, snooze menu, keyboard hints, compose dialog)
- ✕Single thread (just render message body)
- ✕Chat (use Chat)
Install
Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.
Usage
Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.
Props
foldersFolder list
yesmessagesMessages in active folder
yesselectedIdThe open message, CONTROLLED: the reading pane shows what the host says and nothing else, so declining to change it on onSelectMessage really keeps the reader where they are (a router-held selection, a move blocked over an unsaved reply).
—defaultSelectedIdMessage to open first, when the selection is not controlled.
—composeOpenCompose dialog, controlled in the same way as selectedId.
—defaultComposeOpenCompose dialog open on first render, when composeOpen is not given.
—uiLabelsOverride any built-in UI string (i18n); named uiLabels because labels is already the sidebar label-rows data prop
—