# Inbox Page
> A React marketplace inbox page: chats about your listings and ads you asked about, with the listing pinned on top, offers and voice notes.
- Type: React block (Blocks)
- Access: Pro (the source needs a Wingo UI Pro plan, see https://wingo-ui.com/pricing)
- Version: 1.0.1
- Install: `npx wingo-ui@latest add inbox-page`
- Docs: https://wingo-ui.com/components/inbox-page
## Interaction
The list shows every conversation, newest first: tap or click a row to open it (All, Buying, Selling and Unread filter it; the search finds names, listing titles and message text, accents optional). A long press on a row (or the ... button that appears on hover and focus) opens its menu: mark as read or unread, archive, mute, delete (asks first). The list menu opens the archive and the notification settings. On phones the conversation slides over the list; swipe from the left edge, tap the back arrow or press Escape to go back, and the list keeps its scroll. The header shows the person with their verified badge and when they were last active, or that they are typing; its menu opens the profile, blocks (the composer says You blocked this person, with Unblock), reports, archives or deletes. Under it the listing stays pinned with its photo, price and status: View ad, and on your own listings Reserve / Cancel reservation and Mark as sold (asks first; a sold listing greys out). Messages are grouped by day (Today, Yesterday, then the date) with read receipts; photos open a full screen viewer, voice notes play in place, offers you received have Accept and Decline. Scroll up for older messages (the position holds); when a message arrives while you read back, a New message pill takes you down. The composer: quick replies on short threads fill the field, the photo button attaches an image (a preview chip you can remove), Offer opens a dialog with the amount (buying side), Enter sends on desktop and Shift+Enter adds a line (touch keyboards add lines, the button sends; see sendOnEnter). A failed message shows Retry. With autoReply the other side types for a moment and answers; offers are accepted near the price or countered once. Alt+Arrow up / down move between conversations while focus is in the page. Incoming messages are announced to screen readers.
## Installation
```bash
npx wingo-ui@latest add inbox-page
```
Pro item: run `npx wingo-ui@latest login` once with a Pro account. The CLI adds the files, their dependencies and a version record for updates.
With shadcn: `npx shadcn@latest add @wingo-ui/inbox-page` (needs the @wingo-ui registry with your API key in components.json)
Files:
- `components/blocks/inbox-page.tsx`
- `components/blocks/inbox-page-data.ts`
npm dependencies: `npm i motion lucide-react`
Wingo UI dependencies (installed automatically):
- [Alert Dialog](https://wingo-ui.com/components/alert-dialog) ([Markdown](https://wingo-ui.com/components/alert-dialog.md))
- [Audio Player](https://wingo-ui.com/components/audio-player) ([Markdown](https://wingo-ui.com/components/audio-player.md))
- [Avatar](https://wingo-ui.com/components/avatar) ([Markdown](https://wingo-ui.com/components/avatar.md))
- [Badge](https://wingo-ui.com/components/badge) ([Markdown](https://wingo-ui.com/components/badge.md))
- [Button](https://wingo-ui.com/components/button) ([Markdown](https://wingo-ui.com/components/button.md))
- [Currency Input](https://wingo-ui.com/components/currency-input) ([Markdown](https://wingo-ui.com/components/currency-input.md))
- [Dialog](https://wingo-ui.com/components/dialog) ([Markdown](https://wingo-ui.com/components/dialog.md))
- [Dropdown Menu](https://wingo-ui.com/components/dropdown-menu) ([Markdown](https://wingo-ui.com/components/dropdown-menu.md))
- [Empty State](https://wingo-ui.com/components/empty-state) ([Markdown](https://wingo-ui.com/components/empty-state.md))
- [Image Lightbox](https://wingo-ui.com/components/image-lightbox) ([Markdown](https://wingo-ui.com/components/image-lightbox.md))
- [Presence](https://wingo-ui.com/components/presence) ([Markdown](https://wingo-ui.com/components/presence.md))
- [Price](https://wingo-ui.com/components/price) ([Markdown](https://wingo-ui.com/components/price.md))
- [Search Input](https://wingo-ui.com/components/search-input) ([Markdown](https://wingo-ui.com/components/search-input.md))
- [Split View](https://wingo-ui.com/components/split-view) ([Markdown](https://wingo-ui.com/components/split-view.md))
- [Tabs](https://wingo-ui.com/components/tabs) ([Markdown](https://wingo-ui.com/components/tabs.md))
- [Tag](https://wingo-ui.com/components/tag) ([Markdown](https://wingo-ui.com/components/tag.md))
- [Textarea](https://wingo-ui.com/components/textarea) ([Markdown](https://wingo-ui.com/components/textarea.md))
- [Toast](https://wingo-ui.com/components/toast) ([Markdown](https://wingo-ui.com/components/toast.md))
- [useControllableState](https://wingo-ui.com/components/use-controllable-state) ([Markdown](https://wingo-ui.com/components/use-controllable-state.md))
- [useKeyboardInset](https://wingo-ui.com/components/use-keyboard-inset) ([Markdown](https://wingo-ui.com/components/use-keyboard-inset.md))
- [useLongPress](https://wingo-ui.com/components/use-long-press) ([Markdown](https://wingo-ui.com/components/use-long-press.md))
- [useMediaQuery](https://wingo-ui.com/components/use-media-query) ([Markdown](https://wingo-ui.com/components/use-media-query.md))
- [useShortcut](https://wingo-ui.com/components/use-shortcut) ([Markdown](https://wingo-ui.com/components/use-shortcut.md))
- [useStickToBottom](https://wingo-ui.com/components/use-stick-to-bottom) ([Markdown](https://wingo-ui.com/components/use-stick-to-bottom.md))
- [Commerce](https://wingo-ui.com/components/commerce) ([Markdown](https://wingo-ui.com/components/commerce.md))
- [Date utils](https://wingo-ui.com/components/date-utils) ([Markdown](https://wingo-ui.com/components/date-utils.md))
- [Form validation](https://wingo-ui.com/components/form-validation) ([Markdown](https://wingo-ui.com/components/form-validation.md))
- [Motion presets](https://wingo-ui.com/components/motion) ([Markdown](https://wingo-ui.com/components/motion.md))
- [Navigation](https://wingo-ui.com/components/navigation) ([Markdown](https://wingo-ui.com/components/navigation.md))
- [Relative time](https://wingo-ui.com/components/relative-time) ([Markdown](https://wingo-ui.com/components/relative-time.md))
- [Tones](https://wingo-ui.com/components/tones) ([Markdown](https://wingo-ui.com/components/tones.md))
- [UIProvider](https://wingo-ui.com/components/ui-config) ([Markdown](https://wingo-ui.com/components/ui-config.md))
## Usage
```tsx
// app/(market)/messages/page.tsx (the shell lives in app/(market)/layout.tsx: {children})
"use client"
import { InboxPage, type InboxOutgoingMessage } from "@/components/blocks/inbox-page"
export default function MessagesPage() {
return (
{
const response = await fetch(`/api/conversations/${conversationId}/messages`, { method: "POST", body: JSON.stringify(message) })
if (!response.ok) throw new Error("The message could not be sent")
}}
onArchive={async (conversationId: string, archived: boolean) => {
await fetch(`/api/conversations/${conversationId}`, { method: "PATCH", body: JSON.stringify({ archived }) })
}}
/>
)
}
```
## Props
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `conversations?` | `InboxConversation[]` | | The conversations, controlled ({ id, with: PresenceUser & { verified?, rating? }, listing: { id, title, price, priceType, image, status: "active" \| "reserved" \| "sold", mine, href?, priceSuffix? }, messages: InboxMessage[], unread, archived?, muted?, blocked? }); pair it with onConversationsChange. |
| `defaultConversations?` | `InboxConversation[]` | | The conversations while uncontrolled; defaults to INBOX_SAMPLE.conversations (eight Northwind Market threads: Daniel Reed about the bike, Olivia Brooks about your sofa, Greenleaf Realty, Ryan Cooper about the tent and four older ones). A message is { id, from: "me" \| "them", at, kind: "text" \| "image" \| "voice" \| "offer" \| "system", text?, image?, audio?: { src, peaks?, duration }, offer?: { amount, status }, status? }. |
| `onConversationsChange?` | `(conversations: InboxConversation[]) => void` | | Every change: sent and received messages, receipts, offers, unread counts, archive, mute, block, the listing's status. |
| `conversationId?` | `string \| null` | | The open conversation, controlled; null shows Pick a conversation on desktop and the list on phones. |
| `defaultConversationId?` | `string \| null` | `"daniel-bike"` | The conversation open first while uncontrolled. Phones start on the list unless you pass it explicitly (then they open straight into it). |
| `onConversationChange?` | `(id: string \| null) => void` | | A conversation was opened (a row, Alt+Arrow keys) or closed (deleted, marked unread). |
| `folder?` | `InboxFolder` | | The list filter, controlled: all, buying (other people's ads), selling (your ads) or unread. |
| `defaultFolder?` | `InboxFolder` | `"all"` | The list filter while uncontrolled. |
| `onFolderChange?` | `(folder: InboxFolder) => void` | | The filter tabs changed. |
| `onThreadOpenChange?` | `(open: boolean) => void` | | Phones: the conversation was pushed over the list or popped back. Hide the shell's tab bar while it is open (the demo does). |
| `me?` | `{ id: string; name: string; avatar?: string }` | `"Emma Carter"` | You: the sender of your messages. |
| `height?` | `"fill" \| "screen"` | `"fill"` | fill takes what is left inside a shell with layout="fill" (flex-1); screen makes the page exactly the viewport (h-dvh) on its own. |
| `listWidth?` | `number` | `360` | The conversation list's width in px from 768px up; the divider drags between 280 and 440. |
| `quickReplies?` | `string[]` | `"[\"Is it still available?\", \"What's your best price?\", \"Can you deliver?\"]"` | Buying side: chips above the field while a thread is short or empty; a tap fills the field. [] hides the rail. |
| `sellerQuickReplies?` | `string[]` | `"[\"Yes, it's available.\", \"The price is negotiable.\", \"I can ship it by courier.\"]"` | The same rail on your own listings (selling side). [] hides it. |
| `autoReplies?` | `string[]` | `"INBOX_SAMPLE.replies"` | The simulated answers with autoReply, picked in turn. |
| `offers?` | `boolean` | `true` | The Offer button (buying side, priced listings) and the offer cards' Accept / Decline. |
| `autoReply?` | `boolean` | `true` | After you send, the other side types for 1,5 to 3 s and answers with a canned reply; offers are accepted or countered once. Demo realism: turn it off in a real app. |
| `sendOnEnter?` | `"auto" \| "always" \| "never"` | `"auto"` | auto: Enter sends on desktop and adds a line on touch keyboards; always: Enter sends everywhere; never: Cmd/Ctrl+Enter sends. Shift+Enter always adds a line. |
| `searchShortcut?` | `string` | `""` | Focuses the list's search (mod+k notation). Empty by default: the shell's / searches the whole site. |
| `conversationShortcuts?` | `boolean` | `true` | Alt+Arrow up / down open the previous / next conversation while focus is inside the page. |
| `onSend?` | `(conversationId: string, message: InboxOutgoingMessage) => (void \| Promise)` | | Sends a text or photo message. Optimistic: the bubble shows sending, then sent, delivered and read after the reply; a rejection marks it failed with Retry. Simulated when left out. |
| `onOffer?` | `(conversationId: string, amount: number) => (void \| Promise)` | | Your offer from the dialog, before its card is sent through onSend. A rejection keeps the dialog open with the error. |
| `onOfferRespond?` | `(conversationId: string, messageId: string, accepted: boolean) => (void \| Promise)` | | Accept / Decline on an offer you received; optimistic, rolled back with a toast when it rejects. |
| `onListingAction?` | `(conversationId: string, action: "reserve" \| "unreserve" \| "sold") => (void \| Promise)` | | Your ad's actions from the pinned strip; every conversation about the same ad follows the new status. |
| `onArchive?` | `(conversationId: string, archived: boolean) => (void \| Promise)` | | Archive or restore (a toast offers Undo). A new message brings an archived conversation back. |
| `onDelete?` | `(conversationId: string) => (void \| Promise)` | | Delete after the confirmation. |
| `onMarkUnread?` | `(conversationId: string, unread: boolean) => (void \| Promise)` | | Mark as read or unread from the row menu. |
| `onMute?` | `(conversationId: string, muted: boolean) => (void \| Promise)` | | Mute or unmute the conversation's notifications. |
| `onBlock?` | `(conversationId: string, blocked: boolean) => (void \| Promise)` | | Block (after the confirmation) or unblock the person. |
| `onReport?` | `(conversationId: string) => (void \| Promise)` | | Report the person after the confirmation. |
| `labels?` | `Partial` | `"DEFAULT_INBOX_PAGE_LABELS"` | Every visible string, English by default (DEFAULT_INBOX_PAGE_LABELS; INBOX_PAGE_LABELS_EN is the same set under its older name). Nested sets for the composed items: price, audio, lightbox, currencyInput, avatarStatus. |
| `locale?` | `string` | `"en-US"` | Intl locale for prices, times and dates. |
| `currency?` | `string` | `"USD"` | ISO 4217 code of every price, offer and the offer dialog's amount. |
| `now?` | `Date \| number` | `"useNow()"` | The reference time for Today / Yesterday, row times and last seen. The demo passes Sep 24, 2026, 4:40 PM. |
| `tone?` | `Tone` | `"neutral"` | Your bubbles, the send button, the unread counts, the selected filter and the primary actions. |
| `loading?` | `boolean` | `false` | Rows and bubbles as skeletons of their real shape. |
| `animateIn?` | `boolean` | `true` | The list and the conversation rise in once on mount; off in thumbnails and under reduced motion. |
| `linkComponent?` | `(props: LinkComponentProps) => ReactNode` | `""` | The router link for View ad, View profile and Browse ads; defaults to the LinkProvider's (a plain anchor). |
| `className?` | `string` | | Merged onto the root. |
| `classNames?` | `Partial>` | | Classes for the parts: list, row, thread, header, listing, messages, composer, empty. |
## Parts
### DEFAULT_INBOX_PAGE_LABELS (constant)
Every English string of the conversation list, the thread, offers, attachments and voice notes. Spread it and override what you translate.
### INBOX_PAGE_LABELS_EN (constant)
An alias of DEFAULT_INBOX_PAGE_LABELS, kept so older imports keep working.
### INBOX_SAMPLE (constant)
The demo content: you, the eight conversations, the automatic replies and the quick replies for buyers and sellers. Replace it with data from your API.
### INBOX_SAMPLE_EN (constant)
The same demo content under its older name, kept so existing imports keep working.
### createInboxSample (function)
Builds the eight sample conversations about listings, with messages, offers, photos and voice notes.
### withListingSold (function)
Returns the conversations with one listing marked sold and a system line at the end of its thread, for the sold state.
### INBOX_ME (constant)
The signed in user of the sample (Emma Carter), whose messages show on the right.
### INBOX_SAMPLE_IDS (constant)
The ids of the sample conversations, offered by the demo's defaultConversationId control.
### INBOX_VOICE_PEAKS (constant)
The seeded waveform peaks of the sample voice notes.
### INBOX_NOW (constant)
The fixed "now" of the sample (September 24, 2026, 4:40 PM) that message times are measured from.
## Examples
- **Selling side**: Olivia Brooks asks about your sofa: answer her $160 offer, reserve the listing or mark it sold.
- **No conversations**: The empty inbox with a way to browse listings.
- **Listing sold**: The bike was sold: the strip greys out and the composer says so, but still sends.
- **Brand bubbles**: tone="brand" colors your bubbles, the send button and the selected folder.
- **Loading**: Rows and bubbles as skeletons of their real shape.
- **en-GB and pounds**: locale="en-GB" dates and a GBP currency on the same sample.
## See also
- [Chat Thread](https://wingo-ui.com/components/chat-thread) ([Markdown](https://wingo-ui.com/components/chat-thread.md))
- [Split View](https://wingo-ui.com/components/split-view) ([Markdown](https://wingo-ui.com/components/split-view.md))
- [Presence](https://wingo-ui.com/components/presence) ([Markdown](https://wingo-ui.com/components/presence.md))
- [Audio Player](https://wingo-ui.com/components/audio-player) ([Markdown](https://wingo-ui.com/components/audio-player.md))
- [Marketplace Shell](https://wingo-ui.com/components/marketplace-shell) ([Markdown](https://wingo-ui.com/components/marketplace-shell.md))
- [Listing Detail Page](https://wingo-ui.com/components/listing-detail-page) ([Markdown](https://wingo-ui.com/components/listing-detail-page.md))
---
Canonical: https://wingo-ui.com/components/inbox-page
More components: https://wingo-ui.com/components ยท Index for agents: https://wingo-ui.com/llms.txt