Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProUse this when two to four products are compared on a phone: a fixed column of spec names beside a scroll-snap row of product columns, so rows line up and each product snaps into view.
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 for comparing products or plans on narrow screens, where a wide table would scroll in both directions.
Do not use it for more than about five specs per product where a real table with row headers is clearer, or for sortable data.
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 |
|---|---|---|---|
specs | string[] | - | The spec names, shown in a column that stays in place. |
products | CompareProduct[] | - | Each has an id, name, price and values (one string per spec). |
label | string | - | Accessible name of the comparison. |
onChoose | (product: CompareProduct) => void | - | Called by a product's Choose button. |
The pattern ships with a Testing Library test (product-compare-snap.test.tsx). Embla needs layout to count snaps, and jsdom has none, so the repo's mockCarouselLayout helper gives the viewport and slides real sizes.