build69
build69  /  Components  /  Chat & Collab  /  EmailThreeColumn

EmailThreeColumn

v1.0.11Updated 27 Aug 2026

Classic three-column email layout: folders pane, message-list pane, reading pane. Resizable panels.

Preview

Live · 13 stories
DefaultOpen ↗
Why this is recommendedemailmailinboxthree-column+2

The default, out-of-the-box EmailThreeColumn.

Recommended for+14
  • Inbox-style email clients
  • Support ticket inbox
  • Notification mailbox
Tags+6
emailmailinboxthree-columnreading-panedefault
Features+4
  • 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)
Not recommended for−2
  • 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.

get_registry_item({ name: "EmailThreeColumn" })

Usage

import { EmailThreeColumn } from '@/components/patterns/email-three-column';

<EmailThreeColumn folders={folders} messages={messages} />

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

PropTypeRequired
folders

Folder list

Folder[]yes
messages

Messages in active folder

EmailMessage[]yes
selectedId

Currently open message id

string
uiLabels

Override any built-in UI string (i18n); named uiLabels because labels is already the sidebar label-rows data prop

Partial<EmailThreeColumnLabels>

Related