shadcn.io is not affiliated with official shadcn/ui
Reply Queue Kanban Comments Block for Ark UI
A board of three lanes (Waiting on you, Waiting on them, Resolved) that sorts seven client threads by who wrote last, where replying, a quick reply or Resolve moves the card and nothing is dragged.
Installation
Overview
See whose turn it is in every thread, with this reply queue for React with Ark UI. It is the shared inbox of Courtby, a tool for agencies: a compact header with an outline Simulate a reply Button, then one hairline frame holding three lanes on shared lines. The lanes are worked out from the threads, not typed: a thread the client wrote last sits in Waiting on you, one you wrote last in Waiting on them, and a resolved one in Resolved, each with a count Badge. A card shows the title, the age, who wrote last and the last line. Reply opens a Textarea in the card whose Send is the only Shine Button; Quick reply is a Dropdown Menu of two stock answers; Resolve and Reopen move a card in and out of the last lane. Each move is announced in a polite status line and focus follows the card to its new lane. Nobody drags, so the keyboard does everything. Each lane scrolls inside a fixed height, so the board never changes size, and on a phone the lanes sit in one named scroll area with the next lane peeking. It is built from Button, Shine Button, Dropdown Menu, Textarea, Badge, Avatar and Guides, with a CSS entrance only. For support desks, agency inboxes and any queue where the next move depends on who spoke last.
FAQ
How do I fill it with my own threads?
Edit START: each thread has an id, a title, the client and their initials, the last message, who wrote it (speaker, client or team), its ISO at and whether it is resolved. AS_OF is the fixed moment every age is counted from. The lane is never stored: laneOf reads resolved and speaker, so you only keep the thread and its last speaker. Add a lane by adding an entry to LANES and a branch to laneOf.
Why does a card move on its own?
Because the lane is a rule, not a place. Sending a reply or a quick reply sets you as the last speaker, which puts the card in Waiting on them; Simulate a reply makes the client the last speaker on the thread that has waited longest, which puts it back in Waiting on you. Resolve overrides both, and Reopen removes the override so the last speaker decides again. Each move is read out in the status line and focus lands on the same card's button in its new lane.
How do I move a card without a mouse?
Every move is a button or a menu item: Reply, Quick reply and Resolve are ordinary buttons in the card, in reading order, and Tab reaches each lane because the lane is a named scroll region. There is no drag handle and no drag-only step. Cancel closes a reply box and puts focus back on the Reply button.
What stays local?
Replies, quick replies, resolves and the simulated answers all live in the page; Send says nothing was sent. To wire it up, post the reply from send and quick, then replace the card with the thread the server returns, so the lane follows the server's last speaker. The simulated answer is only there to show a card coming back; remove it and listen for real replies instead.
Is it accessible?
Each lane is a labelled list region you can scroll with the keyboard and its count is part of its name. Each card is an article named by its title, every button says which thread it acts on ("Reply to Cookie banner wording"), who wrote last is written, and a move is announced in a polite status line. The board follows the theme and uses no colour to carry meaning.
How does it look on a phone?
The three lanes line up in one sideways scroll area, each about as wide as the screen so the next lane peeks in, and snap into place. The header button drops under the sentence. Each lane still scrolls up and down inside its own height, so a long lane never makes the page longer.