Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProUse this when a product comes in colours: a thumbnail gallery whose swatches swap the whole photo set to the chosen colour and name it in the carousel label.
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 on a product page where every colour has its own photos and the person should see the colour they picked straight away.
Do not use it when the colours share the same photos (change the main image tint instead) or for a single photo.
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 |
|---|---|---|---|
colours | ProductColour[] | - | Each colour has an id, name, CSS swatch and its photos ({ id, label, node, thumb? }). |
label | string | - | Base name of the carousel; the colour name is appended. |
className | string | - | Classes for the wrapper. |
The pattern ships with a Testing Library test (product-gallery-colour-sync.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.