Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Reviews blocks

Pro

Progress Tracker Reviews Block for Radix UI

A review collection goal for a bookshop: a Progress across three milestones, a cell for what each one unlocks, the next unlock and three things that help, with a Slider to preview other counts.

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 review collection goal for React with Radix UI, for Joistgate, a fictional independent bookshop. A compact header says how many reviews the shop has (31) against a goal of 50, and holds a Slider labelled "Preview a count" that tries any count from 0 to 60. Under its own rule, a Progress runs across the goal with a tick and a number at each milestone, then three cells on divide-x say what each milestone unlocks: stars on the listing at 10 reviews, filtering by star at 25, and reviews in search results at 50, each with a check and "Unlocked" or a lock and how many are still to go. The foot names the next unlock and how far away it is, and lists three short things that help: send the request email a week after delivery, ask every customer rather than only the happy ones, and reply to the reviews already there. Everything is worked out from the count and the typed milestones, and state is said in words and a glyph, never only a colour. On a phone the three cells stack. It's built from Progress, Slider and Guides.

FAQ

How do I set my own milestones and count?

Edit COUNT (the real number of reviews), MILESTONES (each with the number of reviews it needs, a title and what it unlocks) and TIPS at the top of the file. The goal is the largest milestone, the Progress is the count's share of it (capped at 100), the ticks sit at each milestone's share, and the next unlock is the first milestone above the count. Change the numbers and every cell, the bar and the sentence at the foot follow.

What is the Slider for?

It previews the band at another count, so a merchant can see what each step looks like, from nothing collected to every milestone unlocked. It changes only this block's local state and the real count stays in the header sentence. Its value is read out as "31 reviews", and the arrow keys, Home and End all work. The Slider takes value={[count]} and a handler for a list of numbers, named by a label it points at with aria-labelledby.

How is reached, next and locked told apart?

By a glyph and words, not colour: a check and "Unlocked" for a reached milestone, a lock and "19 to go" for one still ahead, and the foot sentence names the next one. The Progress bar and its ticks are drawn in your theme's text colour, so nothing here competes with the page's primary controls.

Is the advice about collecting reviews a rule?

It's three typed lines. The one to keep: ask every customer, not only the ones who seem happy. A collection plan that filters who is invited by how pleased they seem skews the average and, in many places, breaks the rules for online reviews.

How is the Progress named for assistive technology?

It carries a label that says the whole state ("Progress toward 50 reviews: 31 reviews"), and the tick marks and number row are hidden from screen readers because the cells beneath say the same thing in text.

Does it work right to left?

Yes. The bar and its ticks sit in a box that keeps its own direction so a milestone's position matches its number, and the cells, the sentences and the list follow the page's direction, with counts isolated so their digits keep their order.

All 100 reviews blocks