shadcn.io is not affiliated with official shadcn/ui
Feature Request Votes Success Block for React
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 Base UI. 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.
Related
- Pro
A bug-report confirmation inside an app panel: the issue number with a copy button, a triage badge, a five-item completeness list with a progress bar, and an Add button that opens a textarea and ticks the missing item locally.
- Pro
A split confirmation for a sent support ticket: a stub with a copyable ticket number, subject, category, priority and time, a bar with three response-time marks worked out from the sent minute, and three articles to read meanwhile.
- Pro
Star Rating Feedback Contact
Support and feedbackA product feedback form for a roadmap tool in a card in card: five named stars with a word that follows the choice, switch-on topic chips and a message, ending in a confirmation that lists what was chosen.
- Pro
Feedback Form Dialog
Drawers and popoversA documentation page with a feedback card docked to its end and shown open: a kind, a message of up to 400 characters with a count, the page it is about, and an optional email that turns on when you let the team reply.
- Pro
Helpful Votes Reviews
Votes and repliesThe best favourable and the best critical review of a water filter jug side by side, each with a Helpful vote and a worked-out 'n of m found this helpful', above the other reviews in ruled rows with a most-helpful or newest order.
- Pro
A confirmation that a help-desk ticket is resolved: the ticket and its status, the agent's closing message in a bubble, a five-star rating you can press or move with the arrow keys, and a Reopen ticket button that flips the status.