Conversation List
Inbox rail with six conversation rows showing avatar, preview, timestamp, and unread count badges on two threads.
Inbox rail with six conversation rows showing avatar, preview, timestamp, and unread count badges on two threads.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Conversation List is the inbox rail of a chat app, six rows each with an avatar, name, truncated last-message preview, and timestamp. Two threads carry unread count badges rendered as filled pill badges, and Maya Chen's row sits active with bg-muted, previewing "Sounds good. I will loop in Riley before the standup." The header pairs the Messages title with a live "2 unread" count derived from the array.
Conversations are one array with active and unread fields. Bolding the name and preview on unread rows is the lightest signal that still works without color.
Reach for this block as the left panel of a two-column chat layout, wired to your threads endpoint. Mount it beside a message thread or a DM panel that updates when the selected row changes.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the personal inbox list. Other conversation lists:
Tip: truncate the preview at one line and let the unread badge carry urgency; two-line previews push rows too tall for a dense inbox.