Compare Tray

Collect items from a catalog and compare them in a table. Free, MIT · Shop and payments › Catalog

A shelf that collects items from a catalog for comparison: thumbnails with remove buttons, a count, Clear and Compare. Compare opens a semantic table in a dialog (or your view, or your own page through onCompare). The catalog buttons and the tray share one selectedIds; toggleCompare gives the buttons the same rules.

Installation

npx valyro-cli@latest add compare-tray

npx shadcn@latest add https://valyro.xyz/r/compare-tray.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { CompareTray } from 'valyro-ui';

Props

Prop	Type	Default
`items` *	`ComparableItem[]`		Every item that can be compared (usually the catalog).
`fields`	`CompareField[]`	`[]`	Rows of the built-in table, in order.
`selectedIds`	`string[]`		Picked ids, shared with the catalog's compare buttons (see `toggleCompare`).
`defaultSelectedIds`	`string[]`	`[]`	Initial `selectedIds` when uncontrolled.
`onSelectedIdsChange`	`(ids: string[]) => void`		Called with the new `selectedIds` when it changes.
`maxItems`	`number`	`3`	Most items in the tray. Default 3.
`minItems`	`number`	`2`	Fewest items to open the comparison. Default 2.
`placement`	`'inline' \| 'fixed-bottom'`	`'inline'`	`inline` (default) in the page flow; `fixed-bottom` pinned to the viewport, with its height reserved in the flow.
`onCompare`	`(ids: string[]) => void`		Hands the comparison to the app (a page, a route). Not together with `renderComparison`.
`renderComparison`	`(items: ComparableItem[], close: () => void) => ReactNode`		Your own comparison view inside the dialog, instead of the built-in table.
`labels`	`Partial<CompareTrayLabels>`		Overrides for the built-in English text; keys left out keep their defaults.

Related components

Product Card — Product card
Product Grid — Product catalog
Product Filters — Catalog filters
Product Spotlight — Featured product: tagged photo, price, rating and actions
Reviews Summary — Reviews: average rating, filterable histogram, sorting and helpful votes
Guided Product Finder — Product finder wizard: branching questions and why a product fits
Location Card — Store location: distance, opening hours, pickup options and ordering
Shopping Cart Drawer — Slide-out cart
Checkout Summary — Order summary at checkout
Checkout Form — Checkout: shipping, address type, payment and field validation
Order Tracking — Order tracking: stages, carrier, tracking number and history
Invoice — Printable invoice: line items, taxes, discounts and totals in any currency

Previous: Guided Product Finder · Next: Location Card · All Shop and payments