Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Reviews blocks

Pro

Accordion Detailed Breakdown Reviews Block for Vue

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 Vue with Ark 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. Arrow keys move between the triggers. The Accordion takes multiple, a defaultValue list and value on each item.

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.

All 100 reviews blocks