shadcn.io is not affiliated with official shadcn/ui
Feature Request Votes Success Block for React Aria
A confirmation after sending a feature request: the request with a four-word pipeline from Triage to Shipped, and four similar requests, each with a status and a Vote toggle that counts once and can be taken back.
Installation
Overview
Turn a sent request into a vote on something that already exists with this confirmation page for React with React Aria. It is the Feathervote page after someone asks for PDF export, a whole screen with the page's rails and one band across it. A check in a muted tile, the heading and one sentence sit over a corner-marked card ruled by Guides. Its first band is the request, with its number and day, over a four-word pipeline, Triage, Planned, Building and Shipped, with Triage marked as where it stands. The second lists four similar requests, each with an outline Badge for its status and a Toggle at the end of its row that adds one vote, and takes it back when pressed again. The one primary is the Shine Button View the roadmap, pinned to the foot of a phone's screen. For feedback boards, product forums and any form that can suggest what already exists.
FAQ
What stays in the page, and how do I wire it for real?
Nothing was sent and no vote was cast. The request, the four similar ones and their counts are typed constants, and a vote only changes the count in the page. To wire it, find similar requests on your server when the request is saved, send each Vote press to an endpoint that records one vote per person, and return the new total.
How does a vote work?
Each row has a Toggle. Pressed adds one to the count, pressed again takes it back, so a person can never vote twice for the same request. The count sits in the button and in its name ("Vote for Print-friendly board view, 128 votes"), and pressed state is announced by the Toggle itself. A live line says what changed.
How is the pipeline marked without colour?
The current word has a filled node and a heavier weight, the others a hollow node and a lighter weight. The list marks the current step for assistive technology and adds the words "where it stands". Nothing depends on a hue.
Is a status only a badge?
No. The status is the badge's word (Planned, Building, Triage) in text. The row also reads as a list with its title first, then the status, then the vote, so the order is the same for keyboard and screen reader users.