shadcn.io is not affiliated with official shadcn/ui
Mention Tally Customer Love Block for Solid
What customers mention most for a review-monitoring tool: six themes ranked with a bar to scale and a count, each opening two word-for-word snippets, with the tally derived from the typed reviews.
Installation
Overview
A customer-love block for Solid with Ark UI, written for Chirpbox, a fictional review-monitoring tool for small businesses. Under a start-aligned header, six themes are ranked in rows that run from rail to rail: a rank, the theme, a bar to scale and how many of the sampled reviews mention it. The numbers are not typed: REVIEWS holds twenty-four short reviews, each tagged with the themes it speaks to, and the tally, the order and the bar widths are counted from them. Opening a row shows two snippets, the first two reviews tagged with that theme, word for word. The bars stay on view whether a row is open or closed, and the first row is open on load. The block ends on the last row, so the next block's top rule closes it. It's built from Guides and Accordion, with CSS transitions for the entrance and the bars and your theme's tokens for every colour. For about pages, review pages and any claim that deserves the evidence one click away. The reviews, names and counts are example data.
FAQ
How is the tally worked out?
Each review in REVIEWS lists the themes it speaks to. A theme's count is the number of reviews that carry its id, the rows are sorted by that count (a tie keeps the order of THEMES) and a bar is the count divided by the biggest count. Add a review or retag one and the counts, the order and the bars follow. Every number on the page is read from the same list.
Which snippets does a row show?
The first two reviews in REVIEWS tagged with the theme, in full and in the reviewer's own words. Order the list so the best ones come first.
How does the keyboard work?
Each row's heading holds a button. Tab moves between rows; Enter or Space opens and closes one. Up and Down arrows also move between the rows.
What does a screen reader hear?
A row reads as its rank, the theme and "6 of 24", and says whether it is expanded. The bar is decorative and hidden, because its number is already in the text.