shadcn.io is not affiliated with official shadcn/ui
Sentiment Badges Reviews Block for Svelte
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 Svelte with Ark 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.