shadcn.io is not affiliated with official shadcn/ui
Analytics Summary Reviews Block for Ark 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.
Installation
Overview
A sortable product table for React with Ark 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.