shadcn.io is not affiliated with official shadcn/ui
Insight Metrics Reviews Block for Svelte
Three insights worked out from typed café-app reviews, each a sentence with a two-bar evidence strip and a button that opens a Sheet listing the reviews behind it.
Installation
Overview
A set of review insights for Svelte with Ark UI, for Mosshouse, a fictional neighbourhood café and its order-ahead app. A header counts the 32 typed reviews (8 low, 1 to 3 stars; 24 high, 4 and 5 stars) and says that topics are found by keyword and each sentence is a template filled in with counts. Under it, three cells with overshoot each hold a topic tag, a sentence such as "Pickup wait comes up in 5 of 8 low reviews and 2 of 24 high ones", a two-bar evidence strip (the share of low reviews and of high reviews that mention the topic, each with its count) and a button, "See the 7 reviews", that opens a Sheet with every review behind the sentence. The sentence's order follows whichever group raises the topic more, so a topic that happy reviewers mention more reads the other way round. Nothing is generated or scored: the topics, their keywords and every count are in the file, and the figures are computed from the reviews. It's built from Sheet, Badge, Button, Rating 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 review has an id, name, rating from 1 to 5, an ISO date, a title and a body; a topic has an id, a label and a list of whole lower-case keywords. A review mentions a topic when its title or text contains one of the words. The counts, the shares, each sentence and the list in the Sheet are all computed from those two arrays, so adding a topic adds a cell.
Is this analysis or generated text?
Neither. The sentences are fixed templates filled in with counts, and the topics are matched by keyword, so they can miss a review that says the same thing in other words. That is why the Sheet lists the matches and the words used: you can check every number against the reviews. Nothing here is a model's reading of the text.
How does the Sheet work?
"See the N reviews" opens the catalog Sheet with the matching reviews, newest first, each with its stars, title, text, reviewer and date, and a line saying how many were low and how many high. Close it with the close button, Escape or a click outside, and focus returns to the button that opened it. It slides in from the end edge on a wide screen and up from the bottom on a phone.