shadcn.io is not affiliated with official shadcn/ui
No Feature Requests Empty State Block for React Aria
A roadmap board's first request with a duplicate check: a drawn seedling with a dashed leaf, a title field that shows the two closest of three sample ideas with an Upvote instead button, and a list of two places for your requests.
Installation
Overview
Start a roadmap board with the first idea, and stop duplicates before they are added, with this no feature requests empty state for React with React Aria. It is the first-request page of Acorndesk, a roadmap feedback board: the page's two side rails run its full height and one band crosses the screen between two rules with a plus mark where each meets a rail. Over the heading a drawn seedling in a pot has one leaf that is only dashed, because the board has no idea yet. Under it a Field with an Input for the idea's title and a duplicate check: as you type, the two closest of three sample ideas appear in a box of one height, each with its votes and an Upvote instead button. Details go in a Textarea. The Shine Button, the only colored control, Submit request, lists your idea with 1 vote and turns the leaf solid. The frame is ruled by Guides, and everything moves with CSS only. For a feedback board, a roadmap or any app that collects ideas.
FAQ
What stays in the page, and how do I make it real?
The requests and the votes stay in the page's state: a reload clears them and Start over clears them without one. The three sample ideas and their votes are typed in the file, and Upvote instead adds one vote to a sample on this page only. To wire it for real, send the title and details to your API where the code says so, search your real ideas for the matches, and send the vote.
How does the duplicate check work?
It is not a search service. The words you type, folded to lower case and without accents, are compared in your browser with the words of three sample ideas and some of their synonyms, so "dark mode" finds the dark theme and "csv" finds the export. The two with the most shared words, then the most votes, are shown. A word still being typed counts when it starts a known word. Nothing leaves the page.
What does Upvote instead do?
It adds one vote to that sample idea, here only, and the button becomes a quiet Upvoted on the same node, so the box never changes. The status line says how many votes the idea has now. You can still submit your own request afterwards, since a similar idea is not always the same one.
What does Submit request do, and what are the limits?
It needs a title, up to 80 characters; without one it says "Add a title first" and keeps focus in the field. A request goes to the top of the list with 1 vote and your name and the page's fixed date, and the field clears. The list always shows two places, dashed until filled, so the page keeps its height; at two the form says the demo is full.
Is it usable with a keyboard and a screen reader?
Tab runs through the title, any Upvote instead buttons, the details, Submit request and Start over. A polite status line says how many similar ideas there are a moment after you stop typing, and only when that has changed, and then what each action did. The drawing and the dashed places are hidden from assistive technology.