Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Storefront blocks

Pro

Product Comparison Table Storefront Block for React Aria

A full spec table for three cordless vacuums in columns: an All specs or Differences only switch that counts the 10 of 14 rows that differ, grouped rows with Best for, a Best mark in words, a price and an Add per column, and a pinned first column on phones.

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

Put the specs side by side, with this comparison table for React with React Aria. A header says what Stoat & Sparrow compares. A hairline frame with a plus mark on each corner opens with a toolbar: two Buttons that work as a switch, All specs and Differences only, and a count of how many of the 14 rows differ, counted from the data. Under it a native table puts three models in columns, each head a drawn vacuum with its name, price and an Add; the middle model carries a Badge and the block's one Shine Button. Rows are grouped (Overview, Cleaning, Power, Handling, Care), start with Best for, and mark the best value in each numeric row with the word Best, the highest or the lowest as the row says; a tie marks every winner. Differences only hides the identical rows, but the table sits over an unseen full copy, so the panel keeps its height. On a phone the first column stays pinned while the models scroll, with a fade at the edge. It's built from Badge, Button, Shine Button and Guides, with a CSS entrance only. For a product page that compares models, or a buyer's guide.

FAQ

How do I fill it with my own models and rows?

Edit MODELS and ROWS. A row has a group, a label, the text of each model's cells, and for a number the nums behind them and whether better is high or low. The count of differing rows and every Best mark come from those.

How is the best value chosen?

For a row with numbers, the winner is the highest or the lowest as better says; every model that equals it gets the word Best. A row where every model has the same cells is not marked, and Best for, Battery and the other word rows are never marked.

What does Differences only do to the height?

It hides the identical rows, and nothing else moves: the table is laid over an unseen full copy of itself in one grid cell, so the panel keeps the height of All specs and the foot never jumps.

What stays local, and how do I wire it to a cart?

Add raises the Bag count in the toolbar and says so in the status line; nothing is bought. In add, send the model's id to your cart.

How does it look on a phone?

The table is wider than the screen and scrolls sideways inside its own frame, which can be focused and scrolled with the arrow keys. The spec names stay pinned at the start and a fade at the end shows there is more.

Is it accessible?

It is a real table with a caption, column headers, row headers and group headers, the switch buttons say which is pressed, and the status line is a polite live region. Best is a word with a tick, never a colour, and each Add names its model.

All 100 storefront blocks