Inbox list

A React component in Beamline's Content & display category.

Conversations waiting for a person, triaged in place: sender, subject and the first words, time, unread weight, star, labels and attachments, grouped by day; tick several for Archive, Mark read and Delete in a bar that grows over the header, or act on one from its row (hover, keyboard or a swipe on touch). Archived rows close up with Undo in their place.

Use it for

The list side of a mail client, a support inbox, shared team inboxes or direct messages: many conversations, some unread, that a person opens, archives or marks in bulk.
A queue of requests where reading state and quick triage matter more than columns.

Not for

The messages inside one conversation (chat-thread, comment-thread).
Updates from the product behind a bell (notification-center).
Records compared by columns and sorted (data-grid, table).
A plain list of things with no reading state (item).

Anatomy

header: a select-all box (some, all or none), the count, and while anything is ticked the bulk bar in its place: N selected, Archive, Mark read or unread, Delete; buttons keep their accessible names when narrow layouts hide the visible text
day groups: Today, Yesterday, the weekday this week, then the month
row: tick box, star, the sender's face (or several for a thread with others), sender in bold while unread with the thread count, subject and the first words of the newest message on one line (two in a narrow room), labels as tags, a paper clip when it has files, time; the open row ringed
row actions: Archive, Mark read or unread, Delete in the time's place while the row has attention (hover, focus); on touch the swipe does the same
swipe on touch: left to archive, right to mark read or unread, the action named under the row as it slides
undo line: where archived or deleted rows were, 'Archived 3 conversations · Undo' for six seconds
loading rows and an empty state

Variants

density: compact, default

States

unread
read
starred
ticked
open (current)
loading
empty
removed (undo line)
swiping

Keyboard

The list is one tab stop: ↑/↓ (or j/k) move, Home/End go to the ends, Enter or Space opens (and marks read)
x ticks the row, Shift+↑/↓ ticks while moving; s stars; e archives; u marks read or unread; # deletes (the shortcuts are named to assistive tech)
Escape clears the ticks
The select-all box and the bulk bar's buttons are Tab stops; a row's own buttons are for pointer and touch, the keys above do the same

Motion

Ticking the first row grows the bulk bar over the header; clearing returns it. Archived and deleted rows leave a fading ghost while the rows below close the gap (useFlip), and the undo line takes their place; Undo grows them back. A star fills from its centre. On touch a swiped row follows the finger with its action revealed underneath and settles back or away. The open row's ring glides between rows. Reduced motion: changes are instant.

Props

Prop	Type	Default	Description
`items` (required)	`InboxItem[]`	—
`value / defaultValue / onValueChange`	`string \| null`	—	The open conversation.
`selected / defaultSelected / onSelectedChange`	`string[]`	—	Ticked rows.
`onAction`	`(action: InboxAction, ids: string[]) => void`	—	archive, delete, read, unread, star, unstar. The list shows the change at once; the app updates its items.
`onUndo`	`(action: "archive" \| "delete", ids: string[]) => void`	—	With it, removals leave an Undo line.
`label`	`string`	—	The list's name. Default "Inbox".
`loading`	`boolean`	—
`empty`	`ReactNode`	—	What shows when nothing is left.
`density`	`"compact" \| "default"`	—
`className / classNames / style / ref`	`root`	—

Built from

checkbox
avatar
button

Dependencies

lucide-react, @radix-ui/react-checkbox

Import

import { InboxList } from "@/components/inbox-list/inbox-list";

Get it

Inbox list is part of Beamline: 200+ components and 50+ complete screens for React that your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 launch price, one payment, no subscription, lifetime updates, one licence for your whole team. Get Beamline · Connect your agent