shadcn.io is not affiliated with official shadcn/ui
Trend Overview Reviews Block for Solid
A router's rating over twelve months as a line with monthly review-volume bars on one axis, a 6 or 12 month switch, a month Slider and a closing band reading that month's average, count and most helpful review.
Installation
Overview
A rating trend for Solid with Ark UI, for the Newelmill Hub, a fictional wifi router. The header's title is worked out from the data (the lowest month and the latest: "From 3.4 in Jan to 4.6 in Sep") and a ToggleGroup at its end switches between the last 6 and the last 12 months. In a framed figure, a line draws each month's average rating and bars draw how many reviews arrived that month, on the same months, in your theme's text colour at different strengths. A Slider under the chart picks a month with the arrow keys, Home and End as well as the pointer, and a marker line and ringed dot follow it. A closing band of three cells under the frame reads the month: its average and its review count as rolling figures, and its most helpful review with stars, title, text, reviewer, date and helpful count. Every month holds the typed star ratings of its reviews (one digit each), so the averages, the counts, the line, the bars, the hidden table for screen readers and the band can never disagree. It's built from Frame, Slider, Sliding Number, Rating, Toggle Group and Guides, with a hand-drawn SVG line and CSS only.
FAQ
How do I use my own months?
Replace MONTHS at the top of the file. A month has an id ("2026-03"), ratings (a string with one digit per review, 1 to 5, in any order) and top, its most helpful review (title, body, name, rating, helpful and an ISO date). The count is the length of the string and the average is worked out in tenths, so nothing is typed twice. The chart scales from 3.0 to 5.0; widen the heightOf range if your ratings fall below 3.
Is the most helpful review chosen from the data?
It is a typed review that you choose per month: the file keeps one top review for each month rather than every review's helpful count. Its star rating should be one of the digits in that month's ratings; it is not checked for you. The averages and counts, which are what the chart draws, come only from the digits.
How does the month Slider work?
It has one stop per visible month, under the month's own column, and a hidden label "Month" with a spoken value such as "Mar 2026, average 4.0". Arrow keys step a month, Home and End jump to the first and last. Switching to 6 months keeps the chosen month when it is still in view and otherwise moves to the first of the six. The band's polite status line reads out the new month.
What is the text equivalent of the chart?
A table inside the figure, hidden visually, lists each visible month with its reviews and average. The drawing itself is hidden from screen readers, and the figure's caption names what it shows.