shadcn.io is not affiliated with official shadcn/ui
App Store Reviews Block for React
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 Base UI, 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.
Related
- Pro
Timeline Feed Reviews
Lists and pagesTwelve 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.
- 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.
- Pro
Reply Thread Reviews
Votes and repliesOne three-star dishwasher review with its conversation in a single framed window: the seller's reply, the buyer's follow-up and the seller again under depth rails, and a real reply form with a live character count that appends your reply to the end.
- Pro
Helpful Votes Reviews
Votes and repliesThe best favourable and the best critical review of a water filter jug side by side, each with a Helpful vote and a worked-out 'n of m found this helpful', above the other reviews in ruled rows with a most-helpful or newest order.
- Pro
Verified Toggle Reviews
Score summariesA review summary with a Verified purchases only switch: the average, the count, the share rated four or more and five distribution rows are worked out again, with a delta line against all reviews.
- Pro
Hotel Travel Reviews
By industryEighteen stay reviews of a small town hotel in tabs by type of traveller, each tab re-deriving the five category scores, with room and night facts and liked and disliked lines.