shadcn.io is not affiliated with official shadcn/ui
Keyword Mentions Reviews Block for Vue
A topic table for sofa reviews: mentions found by keywords, a share bar and the average rating of the reviews that mention each topic against the overall average, sortable, with the matching reviews under it.
Installation
Overview
A topic table for Vue with Ark UI, for the Settlehouse Modular, a fictional modular sofa. A header with the title and one sentence (the overall average and the count, worked out from the reviews) sits over a table band between rules. Eight topics (comfort, assembly, fabric, delivery, size, modularity, durability, value) each show how many of the fourteen typed reviews mention them, a bar for their share of all reviews and the average rating of the reviews that mention them, with "Above overall" or "Below overall" drawn as an arrow, a sign and words, never as a colour. The mentions are found when the file loads by looking for each topic's keywords in every title and text. The column headers are buttons that sort the table, and each topic is a button too: press one and the reviews under the table narrow to those that mention it, three at a time, with a live line such as "Showing 3 of 7 reviews that mention Modularity". On a phone the bar goes and the verdict is its arrow and sign, with the words kept for screen readers. It's built from a native table, Rating, Avatar, Button and Guides, with CSS transitions only.
FAQ
How do I use my own reviews and topics?
Replace REVIEWS and TOPICS at the top of the file. A topic is an id, a label and a list of whole lower-case words; a review mentions it when its title or text contains one of them. The counts, the bar widths (a share of all reviews), the averages (in tenths, by whole-number maths) and the above-or-below verdicts are worked out from that, so a new topic needs no other change. Choose keywords that the topic's reviews really use, or the numbers will be off.
What is the average for each topic?
The average rating of the reviews that mention the topic, to one decimal, set against the average of all reviews. "Above overall" and "Below overall" are the sign of the difference; a topic whose average equals the overall one reads as above with a zero. A topic mentioned only in unhappy reviews, like delivery, shows a low average even if most owners never mention it, which is the point: the table shows what the people who raise it think.
How does sorting work?
Press Topic, Mentions or Average. Topics start A to Z; the numbers start with the highest. Press the same header again to reverse. Each header's th carries aria-sort, and a polite note reads the new order out. Rows with equal values fall back to A to Z, so the order never jumps around.
What does pressing a topic do?
It narrows the reviews under the table to those that mention it, newest first, and tints the topic's row with a check. Press it again, or press Clear, to see every review. The line under the table counts the matches and is read out politely. An unseen copy of the three tallest reviews holds the list's height, so nothing below the block moves.