shadcn.io is not affiliated with official shadcn/ui
Roadmap Discussion Chat Block for React
A roadmap thread with a pane of five dots to spend on six items: add or take back a dot, see each item's total and rank, and quote an item into the conversation.
Installation
Overview
Rank a roadmap in the conversation that decides it, with this roadmap discussion chat for React with Base UI. A hairline frame with a plus mark on each corner holds a window of fixed height for Dotvote, a roadmap thread of a product trio and you: flat Message rows with a ghost Bubble, and an end pane, "Your dots", with six roadmap items. You have five dots: each item has a stepper to take a dot back or add one (from none to three), the budget line says how many are left, and each item shows its total across the three voters and you with its rank from 1st to 6th, worked out again at every press. A Progress bar shows the dots spent, the plus buttons switch off with a reason when none are left, and "Discuss" puts a quote of the item in the composer. The composer's Shine Button, the only colored control, posts to the thread. The frame is ruled by Guides, and everything moves with CSS only. For a planning room, a prioritisation session or any discussion with a budget.
FAQ
How are totals and ranks worked out?
Each item's total is the typed dots of the other three voters plus yours. The rank is the number of items with a higher total, plus the items with an equal total earlier in the list, so ties go to the list order and the 1st to 6th labels never repeat.
What happens when the dots run out?
The budget line reads "You have 0 dots left", every plus button is disabled and a line in the pane says that all five are spent and you can take one back to move it. Taking a dot back enables the buttons again.
What does Discuss do?
It writes "Re: Offline mode:" in the composer and moves focus there, so you can say why. On a phone it also switches back to the chat view.
What stays in the page, and how do I make it real?
Everything. Your dots are state, the other voters' dots are typed in IDEAS and the trio answers from a short script. To wire it for real, send each change from change to your server and replace the typed totals with the ones it returns.