shadcn.io is not affiliated with official shadcn/ui
Sentiment Badges Reviews Block for React
Six meal-delivery reviews each marked with a tone badge from a printed rule, with a drawn shape and a word, and a chip filter by tone with counts.
Installation
Overview
Reviews marked by tone for React with Base UI, for Wickstead, a fictional weekly meal delivery. The header prints the rule: four or five stars is Positive, three is Mixed, one or two is Critical and five stars under a title of up to four words is Enthusiastic. Under a rule with + marks, a band of chips filters by tone, each with its count worked out from the six reviews, and ruled rows follow, each with the reviewer, a verified mark in words, read-only stars with their value in words, a tone badge, a title and the text. Every tone is a drawn shape and a word: a disc inside a ring, a filled disc, a half disc or an empty ring. On a phone the chips scroll sideways. It's built from ToggleGroup, Badge, Rating, Avatar and Guides.
FAQ
How is a tone decided?
By toneOf at the top of the file, which follows the rule printed in the header: nothing is guessed from the text and no confidence figure is shown. Change the rule there and change the sentence in the header with it.
Why do the tones have shapes?
So they never rest on colour: a tone is a drawn shape and its word. The shape follows the text colour, so it works in any theme and on a pressed chip.
What does a chip filter?
The rows, by tone; the chip "All" shows all six. A polite line under the chips says what is showing ("Showing 1 of 6 reviews: Critical"), and the list is also drawn unseen in the same cell, so the page never moves when you press a chip.
How does the chip group work with a keyboard?
It is a single-choice group: one chip is always pressed, and the arrow keys move between the chips.
Base UI exposes each chip as a toggle button with aria-pressed; the other targets expose a radio group.
Related
- Pro
Highlighted Phrases Reviews
Filter and searchThree reading-lamp reviews with hand-picked phrases marked by a plus or minus glyph, and a phrase index of toggles with counts that makes only the chosen kinds of phrase stand out.
- Pro
Typed Summary Reviews
Insights and trendsA hand-written, labelled summary of 36 earbud reviews: two sentences that each end in a count opening a popover of three snippets, the average rating and five themes with mention counts.
- Pro
Tagged Categories Reviews
Filter and searchA 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.
- Pro
Filter Sort Bar Reviews
Filter and searchA toolbar band for rain-jacket reviews: a rating Select, a Verified toggle, a date Popover and a sort Select, a live count with removable chips, and the matching reviews as ruled rows.
- Pro
Tabbed Sections Reviews
Lists and pagesEighteen reviews of a sewing machine sorted into four tabs, Most recent, Most helpful, Critical and Verified, each with its derived count and three reviews.
- 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.