shadcn.io is not affiliated with official shadcn/ui
Tagged Categories Reviews Block for React Aria
A tag sidebar for plant-subscription reviews: eight tags with counts and frequency bars as toggles, an all-or-any Switch, a live count, and reviews that carry their tags as pills.
Installation
Overview
Tagged reviews for React with React Aria, for Trellismoor, a fictional houseplant subscription. A header with the title and one sentence (the average and the count, worked out from the reviews) sits over a band split by a divider. At the start, a tag sidebar: eight tags (plant health, variety, value, packaging, care cards, delivery, pots, support) as cells on shared hairlines, each a toggle that shows its name, how many of the twelve reviews carry it, a bar sized against the most-used tag and, once pressed, a check and a solid tint. Under the tags, a Switch makes the chosen tags "all" rather than "any". At the end, a live line ("Showing 5 of 12 reviews") and the matching reviews, five at a time, each with its stars and their value in words, a title, the text, the reviewer with an initials avatar, a "Verified purchase" mark in words, a fixed date and its tags as pills, the chosen ones filled. When no review carries all the chosen tags, an empty state says so. On a phone the tags become a row that scrolls sideways above the reviews. It's built from Toggle Group, Switch, Badge, Rating, Avatar, Empty and Guides, with CSS transitions only.
FAQ
How do I use my own reviews and tags?
Edit TAGS (an id and a label each) and REVIEWS at the top of the file; each review lists the ids of its tags. The counts, the bar widths (against the most-used tag), the average and the matches are all worked out from them, so adding a tag or a review needs no other change. The list shows PAGE matches at a time (five), newest first.
What does the Switch change?
With it off, a review matches when it carries any of the chosen tags; with it on, only when it carries all of them. With no tag chosen every review shows, and the Switch changes nothing. The live line says which rule applied, for screen readers: "Showing 2 of 12 reviews, tagged all of Value, Variety".
The Switch takes isSelected and onChange, and the tags use selectionMode="multiple" with selectedKeys; each item takes an id.
Why doesn't the page move when I choose a tag?
An unseen copy of the five tallest reviews sits in the same grid cell as the live list and the empty state, so the cell is always as tall as a full list. The status line and Clear button keep their places, and the tag cells have a fixed size.
How does it fit on a phone?
The sidebar becomes a row of tag cells that scrolls sideways, then the Switch, then the reviews, so the tags and the first review share the first screen. The cells keep their bars, counts and checks, and pressing one never moves the page.