Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProUse this when people shortlist while browsing a row of cards: a responsive peek carousel where each card has a Save button, and a live count says how many are saved.
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 destinations, venues, courses or properties where people save a few and come back to compare.
Do not use it when saving needs sign-in first; show the prompt on the button and keep this for signed-in people.
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 |
|---|---|---|---|
destinations | Destination[] | - | Each destination has an id, name, price text and an image node. |
label | string | - | Accessible name of the carousel. |
defaultSaved | string[] | [] | Ids that start saved. |
onSavedChange | (ids: string[]) => void | - | Called when a card is saved or unsaved. |
The pattern ships with a Testing Library test (destination-cards-saveable.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.