Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Reviews blocks

Pro

Accordion Detailed Breakdown Reviews Block for React

Four areas of an e-bike as accordion rows from rail to rail, each with a bar, a score and a signed change against the previous quarter, opening into three scored parts, under a sentence that names the strongest and the weakest.

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.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A detailed breakdown for React with Base UI, for the Plinthgate, a fictional e-bike. A start-aligned header carries a derived sentence ("Strongest: Ride 4.7. Weakest: Service 3.8."), then one accordion whose four rows run from rail to rail under a rule with a plus mark at each end. A row's trigger shows an area's name, a bar from its score out of five, the score and the signed change against the previous quarter; open it and its three parts show the same way. The first area is open on load and any number of rows may stay open. Every score, change and the verdict is worked out from the fourteen typed reviews at the top of the file, each of which scores all twelve parts. It's built from Accordion and Guides.

FAQ

How are the scores worked out?

Each review in REVIEWS has a quarter and twelve scores from 1 to 5, three for each area in order. A part's score is its average over the eight reviews of the latest quarter; an area's score is the average of all its parts' scores in those reviews, to one decimal; its change is that minus the same figure for the six reviews before. The verdict sentence picks the highest and the lowest area from the same numbers.

Can more than one row be open?

Yes: the rows are independent, and the first starts open so a visitor sees what a panel holds. Tab moves between the triggers; this library does not arrow-key between them. The Accordion takes multiple and hiddenUntilFound, so a closed panel stays findable by the browser's search.

How is the change shown without colour?

By an arrow, a sign and a word: up arrow and plus, down arrow and a true minus, or a dash and no sign when it did not move. A screen reader hears "up 0.2 on Q2" or "down 0.2 on Q2". The Service row is the one that falls, which is also why it is the weakest.

How does it fit on a phone?

The bar drops under the name in each row and in each part, with the score and change at the end of the name's line. The rows run rail to rail and nothing scrolls sideways at 320 pixels.

Can I change the areas or their parts?

Edit AREAS: an area has an id, a name and three part names. Keep the order of the twelve numbers in each review in step with it. A fourth or a second part needs a change to PARTS_OF, which lists the three places each area reads.

  • Pro

    Weighted Category Ratings Reviews

    Criteria and compare

    Five criteria as ruled rows with a bar, a score and a signed change against the previous quarter, and a Select that weighs them for everyday, commuting or gym use and re-derives the overall score.

  • Pro

    Rating Breakdown Reviews

    Score summaries

    A review summary for a carry-on suitcase whose star rows filter the reviews: the average, the count, the share that would recommend it and a five-row distribution, beside the four most helpful reviews with a Helpful vote each.

  • Pro

    Generation Benchmark Compare Reviews

    Criteria and compare

    A running watch scored against its own previous generation in a sortable table: Gen 1 and Gen 2 scores each over a thin bar, the signed change with an arrow, and header buttons that sort by criterion or by biggest change.

  • Pro

    Radar Criteria Spider Reviews

    Criteria and compare

    A hand-built radar of six criteria with a toggle that lays one reviewer group, commuters or racers, over everyone, a description list of the scores and an unseen table for screen readers.

  • Pro

    Criterion Picker Multi-Criteria Reviews

    Criteria and compare

    Reviews that each score five criteria, with a picker that sorts the list by one criterion and shows every criterion's average, and the five scores of each review drawn as dots.

  • Pro

    Pros and Cons Reviews

    Insights and trends

    Pros and cons gathered from 86 reviews of a robot vacuum: a two-part bar of the mentions, two columns of points with how many reviews mention each, and one supporting quote per point.

All 100 reviews blocks