shadcn.io is not affiliated with official shadcn/ui
Feature Requests and Votes Account Block for React Aria
Seven feature requests one account made or voted for, each with its status in words and the day it changed, a Tell me when it ships switch, a status history that opens in place, an inline Withdraw vote with Undo, a Mine and Voted for filter, and a derived count of shipped ones.
Installation
Overview
Let people see what became of the features they asked for and backed, with this requests and votes panel for React with React Aria. A hairline frame with a plus mark on each corner holds a toolbar and a list of seven requests, three the account made and four it voted for. A Native Select shows All requests, Mine or Voted for. Each row has the request, its status in words, Under review, Planned, In progress or Shipped, with the day it last changed, and a Switch to be told when it ships; a shipped row says so instead. History opens the status changes one by one in a Collapsible. Withdraw vote asks in place with Withdraw and Keep beside it, a withdrawn vote leaves the list, and Undo, always at the foot, brings the last one back to where it was. A line at the foot counts from the rows, "2 requests shipped since you asked, 5 still open." It's built from Native Select, Switch, Collapsible, Empty, Button and Guides, with a CSS entrance only, and has no primary button because nothing here is created. For the account page of any product with a public roadmap.
FAQ
How do I change the requests and their history?
Edit REQUESTS at the top. Each request has an id, a title, whether it is yours, whether you asked to be told, and a history of dated status changes, oldest first. The status shown is the last entry, the date is that entry's, and the shipped count and the foot line are worked out from them, so a status is never typed twice.
How does withdrawing a vote work?
Withdraw vote turns into Withdraw and Keep in the same place and moves the focus to Keep, the safe choice. Withdraw removes the request from this list and keeps it on a stack; Undo, which is always on the page, puts the last one back at its old position. A request you made is withdrawn the same way and counts as your vote.
Does the list move when I filter or withdraw?
No. The list always has room for all seven rows, each at a fixed height, so a filter shows fewer rows above empty space and the foot stays where it was. Opening a History is the one thing that makes a row taller, because you asked for it. With nothing to show, the Empty state fills the same room.
What stays local, and how do I make it real?
All of it. Switches, withdrawals and Undo change this page's state and say so; no email is sent and no vote is counted anywhere. To make it real, send each change from the handlers to your API, load the requests with their history from there, and send the "tell me" email from your own release process when the status becomes Shipped.
Is it accessible, and how does it look on a phone?
Every switch and button names the request it acts on, History is a button with a state the reader announces, the filter is a labelled select, status is a dot and a word, and the foot is a polite live region. After a withdrawal the focus moves to the next row's button, or to Undo when none is left. On a phone each row stacks the switch and the buttons under the title.