Inbox Page React block for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Inbox Page is part of Pro, with 298 more Pro items: $8 a month or $150 once. 14-day refund before you download any Pro item. See plans

Usage

Import InboxPage from @/components/blocks/inbox-page.

// app/(market)/messages/page.tsx (the shell lives in app/(market)/layout.tsx: <MarketplaceShell layout="fill">{children}</MarketplaceShell>)
"use client"

import { InboxPage, type InboxOutgoingMessage } from "@/components/blocks/inbox-page"

export default function MessagesPage() {
  return (
    <InboxPage
      height="fill"
      autoReply={false}
      onSend={async (conversationId: string, message: InboxOutgoingMessage) => {
        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

• 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.

• defaultConversationIddefault "daniel-bike"
  string | null

  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.

• defaultFolderdefault "all"
  InboxFolder

  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).

• medefault "Emma Carter"
  { id: string; name: string; avatar?: string }

  You: the sender of your messages.

• heightdefault "fill"
  "fill" | "screen"

  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.

• listWidthdefault 360
  number

  The conversation list's width in px from 768px up; the divider drags between 280 and 440.

• quickRepliesdefault "["Is it still available?", "What's your best price?", "Can you deliver?"]"
  string[]

  Buying side: chips above the field while a thread is short or empty; a tap fills the field. [] hides the rail.

• sellerQuickRepliesdefault "["Yes, it's available.", "The price is negotiable.", "I can ship it by courier."]"
  string[]

  The same rail on your own listings (selling side). [] hides it.

• autoRepliesdefault "INBOX_SAMPLE.replies"
  string[]

  The simulated answers with autoReply, picked in turn.

• offersdefault true
  boolean

  The Offer button (buying side, priced listings) and the offer cards' Accept / Decline.

• autoReplydefault true
  boolean

  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.

• sendOnEnterdefault "auto"
  "auto" | "always" | "never"

  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.

• searchShortcutdefault ""
  string

  Focuses the list's search (mod+k notation). Empty by default: the shell's / searches the whole site.

• conversationShortcutsdefault true
  boolean

  Alt+Arrow up / down open the previous / next conversation while focus is inside the page.

• onSend
  (conversationId: string, message: InboxOutgoingMessage) => (void | Promise<unknown>)

  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<unknown>)

  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<unknown>)

  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<unknown>)

  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<unknown>)

  Archive or restore (a toast offers Undo). A new message brings an archived conversation back.

• onDelete
  (conversationId: string) => (void | Promise<unknown>)

  Delete after the confirmation.

• onMarkUnread
  (conversationId: string, unread: boolean) => (void | Promise<unknown>)

  Mark as read or unread from the row menu.

• onMute
  (conversationId: string, muted: boolean) => (void | Promise<unknown>)

  Mute or unmute the conversation's notifications.

• onBlock
  (conversationId: string, blocked: boolean) => (void | Promise<unknown>)

  Block (after the confirmation) or unblock the person.

• onReport
  (conversationId: string) => (void | Promise<unknown>)

  Report the person after the confirmation.

• labelsdefault "DEFAULT_INBOX_PAGE_LABELS"
  Partial<InboxPageLabels>

  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.

• localedefault "en-US"
  string

  Intl locale for prices, times and dates.

• currencydefault "USD"
  string

  ISO 4217 code of every price, offer and the offer dialog's amount.

• nowdefault "useNow()"
  Date | number

  The reference time for Today / Yesterday, row times and last seen. The demo passes Sep 24, 2026, 4:40 PM.

• tonedefault "neutral"
  Tone

  Your bubbles, the send button, the unread counts, the selected filter and the primary actions.

• loadingdefault false
  boolean

  Rows and bubbles as skeletons of their real shape.

• animateIndefault true
  boolean

  The list and the conversation rise in once on mount; off in thumbnails and under reduced motion.

• linkComponentdefault "<a>"
  (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<Record<InboxPageSlot, string>>

  Classes for the parts: list, row, thread, header, listing, messages, composer, empty.

Parts

FAQ

More React blocks