shadcn.io is not affiliated with official shadcn/ui
Multi Select Chat Block for React
A team inbox thread with a Select mode: a checkbox on every row, Shift and click for a range, a mixed Select all, and a bar that replaces the composer with Star, Forward, Delete and Undo.
Installation
Overview
Act on many messages at once with this multi select chat for React with Base UI. A hairline frame with a plus mark on each corner holds a window of fixed height for the Orders desk thread of Sortbox, a team inbox, as flat rows. A Toggle named Select in the top bar turns on selection, which is on at load with two rows picked: every row gets a checkbox, Space toggles the focused one, Shift and click picks the range from the last one you clicked, and a Select all checkbox with a mixed state sits beside "3 selected". A selection bar replaces the composer in its own cell with Star, a Forward Dropdown Menu of three chats, Delete behind an Alert Dialog and Done, and the composer's Shine Button returns when you leave. The frame is ruled by Guides, and everything moves with CSS only.
FAQ
What stays in the page, and how do I make it real?
Everything. The thread is typed in SEED; Star, Forward and Delete only change this page and say so in the status line, and replies to what you send come from a short script. To wire it for real, send picked to your API from star, forward and confirmDelete, and keep Undo as the optimistic rollback if the request fails.
How does Shift and click work?
The last row you clicked is the anchor. Shift and click on another row picks every message between the two, in thread order, or clears them all when the clicked row was already picked. A plain click moves the anchor. Removed rows are skipped, and the range never includes a day label.
How does Select all work?
It is a native checkbox whose mixed state is set on the input itself, so it reads as mixed to assistive technology when some but not all rows are picked. Pressing it picks everything that can be picked, or clears the pick when everything is. The count beside it, "3 selected", is the length of the pick.
Why does the composer give way to a bar?
Both live in one grid cell, and the one not in use is hidden and inert, so the window never changes height and the bar takes the place of the field you cannot use while picking. Done or Escape inside the log leaves the mode, clears the pick and returns focus to Select.
What happens when I delete?
Delete asks first, with Keep them as the first button. Confirming turns the rows into a dashed "Message removed in this demo" in place, and an Undo button appears in the status row, whose space is reserved from the start so nothing shifts. Undo restores the rows and picks them again.