Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Reviews blocks

Pro

Two Product Comparison Panel Reviews Block for Solid

Two blenders chosen with two Selects and set side by side: scores, review counts, five criterion rows with the higher score marked by bold, a check and the word Higher, and one pro, one con and one quote each.

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 comparison panel for Solid with Ark UI, for the Fennmill, a fictional range of three blenders (Pulse, Press and Vortex). A compact header sits over a band with a divider down the middle. Two Selects at the top choose which two blenders to set side by side, and choosing the one already on the other side swaps the pair. Under each Select the blender is drawn as a line silhouette beside its score as a figure, read-only stars and its review count. Five criterion rows follow, each with its name on the divider and a score with a thin bar on either side: the higher score is set in bold with a check and the word "Higher", and a tie says "Tied" on both. The foot gives each blender one pro, one con and one quote. Every score is worked out from the twenty-four typed reviews at the top of the file, and a polite line says how many criteria each blender leads. It's built from Select, Rating and Guides.

FAQ

Where do the scores come from?

From the REVIEWS array: each review names a blender, gives its stars and scores five criteria from 1 to 5. A blender's score is the average of its eight reviews' stars, to one decimal; a criterion's score is the average of that criterion over its reviews. "Higher" compares the two numbers as shown, and a tie says "Tied". The pro, con and quote are typed beside each blender.

What happens if I pick the same blender twice?

The two sides always show different blenders: choosing the one already on the other side swaps them, so the panel never compares a blender with itself. The two Selects are named "First blender" and "Second blender". Each Select takes a list collection or its items directly, and a change handler that reads the chosen value.

How is the higher score marked without colour?

By weight, a check mark and a word: the higher score is bold with a check and "Higher" beside it, the lower one is plain with nothing, and a tie says "Tied" on both sides. Nothing is green or red, and a screen reader reads the number and the word.

Can I use photographs instead of the silhouettes?

Yes. Each silhouette is a few paths in the blender's data, drawn in two greyscale tones. Replace Silhouette with an image if you have photographs; the cell has room for a 56-pixel picture.

How does it fit on a phone?

The two blenders stay side by side in two narrow columns, each with its Select, silhouette and score; the criterion's name sits across both columns above its two numbers. Pro, con and quote stack, the first blender over the second. Nothing scrolls sideways at 320 pixels.

All 100 reviews blocks