shadcn.io is not affiliated with official shadcn/ui
Queue Position Chat Block for Radix UI
A narrow support window that shows your place in line as a ring, a position and a wait, moves up one place every few seconds when you resume, and hands you to Dilys at the front.
Installation
Overview
Show a waiting line before a person answers, with this queue position chat for React with Radix UI. A narrow fixed-height window for Waitlight, a support queue, replaces its log with one centred card: a Circular Progress ring that fills as you move up, "Position 4 of 5", "About 8 minutes" worked out at two minutes a place, "3 agents online" and a tip. Updates start paused. The Shine Button "Resume updates" starts a bounded chain, one place every 3 seconds and 12 seconds at most, beside a Pause, and a polite status line says each place; with reduced motion the button becomes "Move up one place". At the front the card says "You're next", then Dilys joins and the card gives way to a short thread, a typing wait and a composer. "Leave a message instead" opens a note field, and "Leave the queue" ends in an Empty state with a way back. Framed by Guides, it moves with CSS only.
FAQ
What stays in the page, and how do I make it real?
Everything. The line is five places and a timer in this file, the agent count is a typed number and the note is kept only in the component. To wire it for real, subscribe to your queue service for the visitor's position, set place from each update instead of counting down, and send the note to your help desk where leave says so.
How are the ring and the wait worked out?
Two pure helpers. The ring's fill is one minus the places ahead of you over the places in the line, so position 4 of 5 is 25 percent and the front is 100. The wait is the position times two minutes, which is why it reads "About 8 minutes" at the start and "About 2 minutes" when you are next. Neither number is typed twice.
How long does the timer run, and can I stop it?
It starts only when you press Resume updates, moves a place every 3 seconds and stops by itself after four places, about 12 seconds in all. Pause stops it where it is and says so in the status line, and it is cleared when the block goes away. Nothing runs on load.
What happens with reduced motion?
The automatic chain is replaced by a manual "Move up one place" button, so the visitor sets the pace and nothing advances on its own. The ring does not animate between values.
What does leaving the queue do?
"Leave a message instead" opens a note field inside the card at a held height. "Leave the queue" then gives up your place, shows an empty state and offers "Rejoin the queue", which starts again at position 4. The note is kept only in this demo and nobody reads it.
Is it usable with a keyboard and a screen reader?
The ring is decorative and its numbers are repeated in the heading, "Position 4 of 5", which takes focus after you rejoin. Each move is announced by the one polite status line, and every button is reachable in order. After the chat starts, the log is a focusable region announced as a log.