Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Feature Requests Carousel Block for Solid

Eight feature requests with a vote button on each, a status word, a rank by votes and a sort you press: voting changes the count at once but never moves a cell, and Re-sort applies the votes cast since.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Let customers see what others asked for and add a vote, with this feature requests carousel for Solid with Ark UI. Voteholt, a feedback board, lists eight requests (dark mode for embedded boards, merging duplicates, private boards, a weekly digest, vote weights, CSV export, a public roadmap page and chat alerts) on a hairline track. Each cell has the title, a status Badge, the rank by votes, two lines of summary, the requester's initials, the comment count, the filing date and a vote Button that is a pressed toggle: one press adds your vote, a second takes it back. A vote changes the count and the rank at once but the cell stays where it is, so the card under your pointer never jumps. A toolbar band holds a Segment Group "Sort by: Votes, Newest, Status" and a Re-sort button whose badge counts how many places the order is out of date. Pressing a segment or Re-sort re-orders the track, returns to the first cell and says so. The foot holds the counter, a dot for each step and Previous and Next. Three cells show from the large breakpoint, two from medium, and one with the next peeking on a phone. The ruled bands come from Guides. The product, the requests and the counts are made up.

FAQ

What does a vote do?

It adds one to that request's count and presses the button (aria-pressed), and a second press takes it back. The rank ("Rank 3 by votes") and the total in the header recompute at once. Nothing is submitted: the status line says "Voted for ... in this demo" and the counts live in the page's state.

Why doesn't the order change when I vote?

Moving a cell under the pointer breaks the click you just made and loses your place in the track, so the order only changes when you ask. Pressing a segment sorts with the votes so far; Re-sort applies the same sort to the votes cast since, and the number on its button says how many places are out of date. When the order is already current, Re-sort answers "The order is already current." instead of doing nothing.

How are the three sorts ordered?

Votes puts the highest count first; Newest puts the latest filing date first; Status puts requests closest to shipping first (In progress, Planned, Shipped, Under review) and breaks ties by votes. Each is a total order over the typed data, so the same inputs always give the same cells in the same places.

How does it work with a keyboard?

Tab reaches the sort switch, Re-sort, the dots, Previous and Next, and the vote buttons of the cells in view. The arrow keys move the track by one cell (mirrored in a right-to-left layout) and Home and End jump to the ends. Each vote button is named "Vote for" plus the request's title. Cells out of view are hidden from the tab order and from screen readers.

What stays local in the demo?

Everything. The requests and base counts are typed in REQUESTS, votes live in state and reset on reload. To wire it for real, send the toggle to your API (one vote per signed-in user), return the new count, and keep the order array separate from the counts as the block does.