shadcn.io is not affiliated with official shadcn/ui
Mention Tally Customer Love Block for React
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 React with Base 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. The arrow keys do not move between rows on this library, so Tab does the moving.
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.
Related
- Pro
Dialog Reader Testimonial Grid
CustomersSix customer quotes for a shared-inbox product as cards that share their hairlines, each cut to three lines; each opens one reader dialog with the whole quote, Previous and Next and a counter.
- Pro
Guestbook Customer Wall
CustomersA customer wall as a guestbook: five dated notes from shop owners, newest first, beside a framed form that adds your note to the top of the list for this visit.
- Pro
Proof Index Social Proof
CustomersSix kinds of proof for a reference-call tool laid out like a table of contents: each row leads from the kind of proof to its number along a solid hairline, with one line of detail and a link to its source.
- Pro
Rating Breakdown Testimonials
Ratings and reviewsA review summary whose histogram rows are filter buttons: press a star row and the featured reviews narrow to that rating, with a live count and an empty state.
- Pro
Rosette Rating Badges About
CustomersFour review-site ratings for a booking tool, each a drawn rosette with the score in its middle over the site's name, a read-only star rating and its review count, in framed cells.
- Pro
Tenure Testimonial Carousel
CustomersA carousel of five long-term customers of a retention product, each with how long they have stayed and read-only stars, beside the figure the block is about: 68% stay three years or longer.