shadcn.io is not affiliated with official shadcn/ui
Changed Ratings Stories Reviews Block for React
Four sock owners who rated twice, as a two by two grid of cards whose toggle group flips between the first week and month three, with a badge showing the signed change.
Installation
Overview
A set of changed reviews for React with Base UI, for Tarnwood, fictional merino wool socks. A header counts, from the typed ratings, how many of four owners rated again after three months and how many went up, went down or stayed the same. Under it, a two by two grid of cells with overshooting lines (one column on a phone) holds one card per owner. Each card has a "Week 1 / Month 3" toggle group that flips the whole review, stars with their value in words, title, text and date, and a badge that says what changed with its sign: "Updated +2", "Updated -1", "First rating" in week 1, or "Rated again, no change". Both versions share one cell of the card, so flipping never moves the page. It's built from Toggle Group, Rating, Badge, Avatar and Guides.
FAQ
Where do the counts in the header come from?
Each story in STORIES has a week and a month version with a rating. The change is month minus week, and the header counts the stories that went up, down or stayed, so it can't disagree with the cards. Add a story and the header follows.
What does the toggle group do?
It chooses which version is on view; one is always pressed. The version that is not shown stays in the page, invisible and inert, in the same grid cell, which keeps the card's height the same either way. Cards start on Month 3, so the "Updated" badges show on first sight. The toggle group is Base UI's, with one pressed item that cannot be cleared.
How is the change shown without colour?
By an arrow, a sign and words: an up arrow with "+2", a down arrow with "-1", no arrow with "Rated again, no change". The sign reads left to right even in a right-to-left page so it stays unambiguous, and the badge uses your theme's text colour.
Related
- Pro
Case Study Testimonial
Results and figuresA customer case study for a freight-tracking app, split by a hairline divider: the headline, a Shine Button and an at-a-glance list beside Challenge, Solution and Result bands with a headline figure and a pull quote.
- 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
Masonry Layout Reviews
Cards and wallsTwelve reviews of pruning shears as cards of every length in CSS columns, with a star filter, an order switch, a polite count and a Helpful vote on each card.
- 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
Sized Mosaic Wall Reviews
Cards and wallsA wall of twenty-four bicycle light reviews as a mosaic whose tile size follows helpful votes, length or nothing, behind a Show all button.
- 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.