Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Split Inbox Chat Block for Solid

A shared shop inbox split into Primary and Other, where a row's menu moves a conversation between the two with counts that follow, opening a row clears its unread count, and sending bumps it to the top.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Sort a team inbox into what needs you and what can wait, with this split inbox chat for Solid with Ark UI. A hairline frame with a plus mark on each corner holds a wide window of fixed height for Inboxfold, a shop's shared inbox. The start list has a search field and two sections, Primary and Other, with six customer conversations: each row shows an initials avatar, the customer, a one-line preview, the last time and an unread count. A "More actions" Menu on every row (on hover, on focus and always on a touch screen) moves it to the other section; the headings' counts follow and the status line says where it went. Opening a row clears its count and shows its thread beside the list; sending in it brings the row to the top of its section and a sample reply arrives after a short typing line. On a phone the window shows the list or the thread, with a Back button. It's built from Dropdown Menu, Badge, Input, Avatar, Message, Bubble and Guides. For shared inboxes, support desks and any list that triages itself.

FAQ

What stays local, and how do I make it real?

The six conversations and the sample replies are typed in START and REPLIES, and moves and sends only change state: nothing is saved or sent. Save the section in move, send the message in post, and replace the reply with your inbox's own; the counts, the unread total and every preview are derived from the conversations.

What does the row menu do?

It moves that conversation to the other section ("Move to Other" or "Move to Primary"), keeps it where it was in list order, re-derives the counts in both headings and says so in the status line. There is no undo here: that lives in a conversation list with Undo. Focus lands on the moved row.

What clears the unread count?

Opening a row. A reply that lands in a conversation you aren't looking at adds one, and the unread total in the list header is the sum of the rows.

How does it look on a phone?

One pane at a time: the list first, then the thread when you open a row, with a Back button that returns to the list and focuses the row you left. The window keeps its height and the status line stays visible on both views.

Does it work in right-to-left languages?

Yes. The list sits at the start side, the menu and times sit at the end of each row, the back and send arrows flip, and names and previews sit in isolated runs.