Store
Product image gallery
Cover imagery with thumbnails, price and type pills over the media.
Available
Ports as-is
Examples
Rendered live from the maintained Storybook story. Lantern stores only the story id and embeds Storybook rather than duplicating the component or its demo.
Product image gallery
Rendered live from Storybook
Storybook must be running for this to load — bun run start:storybook from the monorepo root, or set NEXT_PUBLIC_STORYBOOK_URL to a deployed instance.
Props
The component's public API, read from its TypeScript source. Descriptions come from TSDoc on the prop, so this table cannot drift from the component.
| Prop | Type | Default | Description |
|---|---|---|---|
coverImage | string | — | Primary image. Prepended to `images` to form the carousel. |
images | string[] | — | Additional images, in order. |
title* | string | — | Alt text stem for every slide. |
product* | Product | — | Drives the two overlay pills (price and media type). |
initialIndex | number | 0 | Which slide is showing on mount. Clamped into range. |
selectedIndex | number | — | Fully controlled slide index. Wins over `initialIndex` when supplied. |
onSelectedIndexChange | (index: number) => void | — | Undocumented — add TSDoc to the prop in the library. |
forceArrowsVisible | boolean | false | Pin the prev/next arrows visible. They are `group-hover` revealed by default, which a static snapshot can never trigger. |
currencySymbol | string | "$" | Currency prefix for the price pill. AUD by default. |
showPricePill | boolean | true | Hide the price pill regardless of `product.pricing`. |
showTypePill | boolean | true | Hide the media-type pill. |
className | string | — | Undocumented — add TSDoc to the prop in the library. |
Reference
Transcribed from the component audit. If this disagrees with the source, the source is right.
- Source
src/components/store/ProductImageGallery.tsx- Portability
- Copies across unchanged — only the utils import path moves.