Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Blog blocks

Pro

Vote Board Roadmap Blog Block for React Aria

Upcoming posts as numbered rows: a vote toggle with a rolling count, the title and what it will argue, and a drawn four-segment stage meter from Researching to Scheduled.

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.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A content roadmap for React with React Aria, written for Foresail, a product-strategy blog. A start-aligned header and a legend band sit over four upcoming posts as numbered rows. Each row starts with a vote Toggle (an arrow over the count, which rolls up by one when you vote and back when you take the vote back), then the title, one line on what the post will argue and the author, then a drawn stage meter: four segments, solid as far as the post has got (Researching, Drafting, Editing, Scheduled), with the stage in words under it. A scheduled post shows its fixed publish date. It's built from Toggle, SlidingNumber and Guides. The votes are example data and live in this page only.

FAQ

Where do my votes go?

Nowhere: a vote only adds one to that row's shown count in the page, and "You voted for 2 of 4" counts them. A reload brings the counts back. To make it real, send the toggle's change to your server and store it against the signed-in reader.

How does the vote button work?

Each vote is a Toggle named "Vote for" and the post's title, with the current count in its name. Pressing it fills it with the foreground colour and the number rolls up by one; pressing it again undoes it. The toggle takes isSelected and onChange.

How is the stage shown without colour?

The four segments are all the same colour family: reached ones are solid foreground, the rest a neutral track, so progress reads as weight. The stage is also written under the meter ("Drafting, stage 2 of 4"), and the legend band names all four, so no information depends on the drawing.

How do I change the posts or the stages?

Edit POSTS and STAGES at the top of the file. A post's stage is an index into STAGES; give a scheduled post an ISO date, formatted in UTC, and the row shows "Scheduled for" and that date.

How does it fit on a phone?

The vote button stays at the start of the row, the title and its line sit beside it, and the stage meter drops under them across the full width of the row.

What moves, and what happens with reduced motion?

The header and the list fade up once on load, and the vote count rolls when it changes. With reduced motion the entrance is off and the number changes without rolling.

All 100 blog blocks