shadcn.io is not affiliated with official shadcn/ui
Timeline Feed Reviews Block for React
Twelve reviews of a smart thermostat on a month-by-month timeline with each month's derived average and count, review cards on shared hairlines and a firmware filter.
Installation
Overview
A review timeline for React with Base UI, for Mewsfield, a fictional smart thermostat. A start-aligned header gives the count and carries a Select at its end that limits the feed to one firmware version. Each month is a ruled row: at the start its node (the month, a half-star Rating for its average, and "4.5 average from 2 reviews", all worked out from the reviews that show), then a hairline with a + mark at its top, and at the end the month's cards on shared hairlines, two across, each with the stars and their value in words, a firmware badge, the title, the text, the reviewer, a verified mark and the date. A month with nothing on the chosen firmware keeps its row and says so. An unseen copy of the whole feed holds the height, so the page never moves. On a phone each month's node sits above its cards. It's built from Select, Rating, Badge, Avatar and Guides.
FAQ
How are the monthly figures worked out?
From the reviews that show. The month's average and count are computed from its reviews on the chosen firmware, so picking "Firmware 2.2" re-derives every month. The stars beside the average are drawn to the nearest half and the figure beside them is exact. Edit REVIEWS and MONTHS at the top of the file to use your own.
What happens to a month with no reviews on the chosen firmware?
Its row stays in place with "No reviews" in the node and a one-line note where the cards were, so the timeline's shape holds. An unseen copy of the full feed shares the grid cell, so the block keeps its height and the page never jumps.
What is the timeline made of?
The vertical hairline is the end cell's own start border, and each month's rule carries a + where it meets the hairline, drawn by Guides. The cards in a month share hairlines, and an odd last card spans both columns so no empty slot shows the border colour.
Related
- Pro
Infinite Scroll Reviews
Lists and pagesTwenty reviews of a podcast app ten at a time in a fixed-height scroll region that appends five more at its end, with a Load more button, placeholder rows and a polite count.
- Pro
Recent Activity Reviews
Insights and trendsThe running average of a ski-hire shop's ratings: the last ten ratings as pressable rows showing the average before and after each, beside a step line with the selected point marked.
- Pro
Compact List Reviews
Lists and pagesTwelve one-line reviews of a notes app as a real table with sortable column heads, a Select that mirrors the sort, and nothing to open.
- Pro
Paginated List Reviews
Lists and pagesTwenty-four reviews of a cookbook five to a page, with a page-size Select, the catalog pagination with ellipsis and a polite 'Showing 6 to 10 of 24'.
- Pro
Verified Purchases Reviews
Lists and pagesReviews of a leather satchel with the purchase evidence beside each one: variant, how long it was owned, a masked order line and a hover card saying what was checked, ordered newest or longest owned.
- Pro
Rating Breakdown Reviews
Score summariesA review summary for a carry-on suitcase whose star rows filter the reviews: the average, the count, the share that would recommend it and a five-row distribution, beside the four most helpful reviews with a Helpful vote each.