# Inbox list A React component in [Beamline](https://beamline.io/)'s [Content & display](https://beamline.io/components/display) category. Live demo: https://beamline.io/components/inbox-list 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](https://beamline.io/components/chat-thread), [comment-thread](https://beamline.io/components/comment-thread)). - Updates from the product behind a bell ([notification-center](https://beamline.io/components/notification-center)). - Records compared by columns and sorted ([data-grid](https://beamline.io/components/data-grid), table). - A plain list of things with no reading state ([item](https://beamline.io/components/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 ```tsx 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](https://beamline.io/checkout?pack=complete) · [Connect your agent](https://beamline.io/connect) ## More in Content & display - [Image compare](https://beamline.io/components/image-compare): Two images in one frame with a divider: drag anywhere, or arrow keys on the handle; horizontal or vertical, with captions. - [Live cursors](https://beamline.io/components/live-cursors): Who else is working on this, and where: over any shared surface, each person's pointer in the colour their name always gets, with a name flag, gliding… - [Video player](https://beamline.io/components/video): A video player on the native