shadcn.io is not affiliated with official shadcn/ui
App Store Reviews Block for React Aria
Twelve reviews of a habit tracker app with a version Select that re-derives the score and distribution, version and device facts, updated-review notes, helpful votes and nested developer responses.
Installation
Overview
An app reviews section for React with React Aria, for Tallywren, a fictional habit tracker. A start-aligned header gives the count and the average, then a split behind a divider. At the start is the score column: the average as a large figure beside half-star stars, the count, a Select that narrows everything to all versions, version 3.4 or version 3.3, and five distribution rows. At the end are the newest reviews of the chosen version as ruled rows, each with its stars, a version badge and the device, the title, the text, the reviewer, a note when the review was updated, a Helpful vote and, under the reviews that have one, the developer's response. The score, the rows and the list are all worked out from the typed reviews, and an unseen copy of every version holds the list's height. On a phone the score comes first and the Select sits under it. It's built from Select, Rating, Toggle, Badge, Avatar and Guides, and it names no real store and draws no store mark.
FAQ
Where do the score and the distribution come from?
From the typed REVIEWS array. The average (one decimal, by integer maths), the count and the five rows are computed for the chosen version, and the percentages use the largest remainder method so they always add up to 100. The stars are drawn to the nearest half and the figure beside them is exact. Edit the array at the top of the file to use your own reviews.
What does the version Select do?
It narrows the score column and the list to one version of the app, or lifts the narrowing with "All versions". Reviews carry the version they were written for, so version 3.3's score reflects only its own reviews. A polite status line says what the list shows, for example "Showing 3 of 7 reviews on version 3.4."
How are developer responses shown?
Under the review they answer, set off by a hairline at the start, with the team's name and a fixed date. Reviews without a response simply end after the Helpful vote. The responses are typed example copy, not generated.
Does Helpful send anything?
No. The vote counts once and can be taken back, and a polite line says so, but it only changes local state and nothing leaves the page. Reloading the page forgets it.
How does it fit on a phone?
The score, the stars and the count come first, then the Select, then the five rows and the status line, then the reviews under a rule. The device and version facts wrap above each review's title.
Is this a real app store layout?
No. The product, the devices ("Pocket 4", "Slate 11") and the reviewers are invented, and nothing in the block uses a store's logo, colour or star style. The facts it shows (version, device, an updated review and a developer response) are the ones app reviews usually carry.