Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Insight Metrics Reviews Block for Radix UI

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A set of review insights for React with Radix 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.

Does it work right to left?

Yes. The cells, the bars (which fill from the start) and the review list follow the page's direction, and the Sheet opens from the end edge: the block reads the direction of the section when the window changes and picks the matching side.

How does it fit on a phone?

The three cells stack in one column and the Sheet rises from the bottom, up to 88 percent of the screen, with its list scrolling inside. Nothing scrolls sideways at 320 pixels.