Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA compare tray with a fixed number of slots: each slot holds one product, empty slots open a searchable list of the rest, and Compare unlocks at two. Use this when people choose a few items to compare side by side.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use it above comparison tables and on product lists, where the number of columns is fixed (three or four) and people need to see at a glance which slots are free.
Do not use it when any number of items can be compared. Use a multi-select with chips.
This item is part of tealmac UI Pro
The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.
| Prop | Type | Default | Description |
|---|---|---|---|
items | { id, name, subtitle? }[] | - | What can be compared. |
max | number | 3 | Number of slots. |
min | number | 2 | Fewest items for Compare to work. |
value | string[] | - | Chosen ids in slot order (controlled). |
defaultValue | string[] | [] | Initial ids. |
onValueChange | (ids: string[]) => void | - | Runs when a slot changes. |
onCompare | (ids: string[]) => void | - | Runs when Compare is pressed. |
group named Compare; each slot is a listitem-like region with a number: Slot 2 of 3.Slot 2 of 3: empty, add a product; a filled slot has a Remove button named Remove <name>.aria-disabled and says Choose 2 or more to compare until the minimum is met; a polite status announces additions and removals.The pattern ships with a Testing Library test (compare-picker-max-items.test.tsx) that covers filling slots, hiding chosen items from the list, removing, the Compare minimum and the announcements.