shadcn.io is not affiliated with official shadcn/ui
Masonry Layout Reviews Block for Vue
Twelve 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.
Installation
Overview
A masonry of reviews for Vue with Ark UI, for the Furrowmill Bypass Pruners, a fictional garden tool. A start-aligned header gives the count and the average (worked out from the twelve typed reviews), two toggle groups filter by stars (All, 5 stars, 4 stars, 3 and below) and set the order (Newest, Most helpful), and a polite line counts what shows. The cards sit in CSS columns, three across on a desktop, two on a tablet and one on a phone, read down each column. Each card is a full review with its own overshooting lines: the stars with their value in words, the title, the text, the reviewer with a verified mark, the date and a Helpful vote that counts once. An unseen copy of every card in both orders holds the height, so the page never moves. A phone masks the list at 520 pixels behind a "Show all reviews" button. It's built from Toggle Group, Toggle, Rating, Avatar and Guides.
FAQ
Which way do the cards read?
Down each column, then across: the browser balances CSS columns by height, so the newest review is at the top of the first column and the next ones follow beneath it. Each card is kept whole with break-inside-avoid. Reordering or filtering reflows the columns, which is why the cards are keyed by review.
Why doesn't the page move when I filter?
An unseen copy of all twelve cards, in both orders, shares the grid cell with the live columns. The cell keeps the height of the taller copy, so a filter that shows fewer cards leaves empty space under them rather than pulling the page up. Cards moving inside that fixed space are expected.
How do the two groups behave?
Each is a single choice that cannot be empty: pressing the chosen item again does nothing. The polite line says the result in words, such as "Showing 4 of 12 reviews: 3 and below, most helpful". Edit STAR_CHOICES and ORDER_CHOICES to change the options.