Inbox / Message List Block React component
A two-pane inbox: Inbox, Starred and Archive folders with an unread count, search, rows with unread dots, labels and attachment icons, checkboxes for bulk mark-read and archive, a reading pane with attachments and a reply box, keyboard shortcuts and archive with undo. On phones the list and the message take turns.
About the Inbox / Message List Block component
Inbox / Message List Block is a complete two-pane inbox for support desks, CRMs or internal messaging. The list shows who wrote, the subject, a preview, labels and whether there are attachments, with unread conversations in bold and a count on the Inbox tab.
Click a conversation to read it on the right and reply without leaving the page. Star the important ones, tick several and archive or mark them read at once, or move through the list with j and k and archive with e. Archived conversations slide away with an Undo, and on phones the list and the message take turns on screen.
When to use it
Use it for help desk tickets, sales inboxes, contact form submissions, in-app messaging or notification centres with replies.
Map your statuses to the three folders, or add more by extending the Folder type and filter.
Installation
Add the Inbox / Message List Block component to your project with the shadcn CLI. It lands in components/inbox-message-list.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/inbox-message-listOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<InboxMessageList /> accepts 6 props, all optional.
| Prop | Type | Default |
|---|---|---|
| messages | InboxMessage[] | — |
| labels | Record<string, string> | DEFAULT_LABELS |
| me | string | "You" |
| onReply | (id: string, text: string) => void | — |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- messagesInboxMessage[]
- labelsRecord<string, string>Default: DEFAULT_LABELS
- mestringDefault: "You"
- onReply(id: string, text: string) => void
- theme"dark" | "light"Default: "dark"
- classNamestring
npm dependencies
Installed for you by the shadcn CLI.
Inbox / Message List Block FAQ
- Which keyboard shortcuts are there?
- j or Down opens the next conversation, k or Up the previous one, e archives the open conversation and s stars it. They are ignored while typing in search or the reply box.
- How does bulk selection work?
- Hover a row, or tab to it, and its avatar turns into a checkbox. With any row checked, the search field turns into a bar with Mark read and Archive.
- Can archiving be undone?
- Yes. Archiving shows a toast with Undo for five seconds. In the Archive folder the same button moves conversations back to the inbox.
- Does it work on phones?
- Below about 860px the card shows either the list or the open message, with a Back button in the message toolbar.
- Is it accessible?
- Folders are a tablist, rows are focusable buttons whose label includes unread state, checkboxes and stars are named, the open row has aria-current, the reply box has a label and archive messages are announced.
