shadcn.io is not affiliated with official shadcn/ui
Changed Ratings Stories Reviews Block for Vue
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 Vue with Ark 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.
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.