Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Analytics Summary Reviews Block for Radix UI

Six products of one outdoor shop ranked by their reviews: a sortable table of average, count, a five-segment ratings bar, the 30-day change and the answered share, all worked out from typed reviews.

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

A sortable product table for React with Radix UI, for Marlwood, a fictional outdoor shop. A header names the leader (derived: the product with the highest average) and counts the reviews, then a table band runs between rules from rail to rail. Each of the six products is a row: its average rating beside half-star stars, the number of reviews, a five-segment bar of how its ratings split (five stars darkest, one star faintest, each segment a solid tone of your text colour), the change over the last 30 days as an arrow, a signed number and a word ("Up", "Down" or "Level"), and the share of its reviews the shop answered. There are 85 typed reviews, each a rating, an ISO date and a flag for a reply; every figure is computed from them when the file loads. The headings are buttons that sort the table. Nothing is coloured by good or bad. It's built from a native table, Rating and Guides, with CSS transitions only.

FAQ

How do I use my own products and reviews?

Replace PRODUCTS at the top of the file. A product has an id, a name, a kind and its reviews, each { answered, date, rating } with an ISO date. The averages (in tenths, by whole-number maths), the counts, the bar shares (by the largest remainder method, so each bar adds up to 100), the answered percentage and the change are all derived. Set AS_OF to the day you measure to.

What does Change measure?

The average of the reviews posted in the 30 days up to AS_OF minus the average of those posted in the 30 days before that, both rounded to a tenth first, so the sign always agrees with the averages you could work out yourself. A product that has no reviews in one of the two windows would show a flat zero, so give each product at least one in each, as the typed data does.

How does sorting work?

Press Product, Reviews, Average, Change or Answered. Products start A to Z; the numbers start with the highest. Press the same heading again to reverse. The th carries aria-sort and a polite note reads out the new order. Equal values fall back to A to Z, so the order never jumps about.

How do I read the bar?

It shows the share of the product's ratings at each star, with five stars darkest on the start side and one star faintest at the end. A key above the table names the five tones, and a screen reader hears the same split in words ("5 stars 59%, 4 stars 24%, ...") on every row. Only weight tells the segments apart, never a hue.

How does it fit on a phone?

The Reviews and Answered columns and the stars go, the review count moves under the product name and the bar sits under it too. Product, Average and Change stay, with the change keeping its arrow, sign and word. Nothing scrolls sideways at 320 pixels.

Does it work right to left?

Yes. The columns follow the page's direction, the bar mirrors so five stars stay at its start, the diagonal arrows are mirrored and the signed numbers are isolated with a true minus.