Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Reviews blocks

Pro

Timeline Feed Reviews Block for React Aria

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.

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 timeline for React with React Aria, 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.

Is the filter announced?

Yes. A polite status line says "Showing 5 of 12 reviews: firmware 2.2." after each choice, and the Select names the firmware in force.

How does it fit on a phone?

Each month's node (name, stars and average) sits above that month's cards, which stack in a single column under a rule. The Select goes full width under the header.

All 100 reviews blocks