Koala UI

Product Overview

The top of a product page: the photos and the buy box. A swipeable gallery beside live pickers and a details accordion, a photo grid that opens in a lightbox, or an editorial split with stock per size.

Variant 1

Variant 2

Pro

Variant 3

Pro

Built from#

The gallery is the Carousel with thumbnails indicators at thumbnailSize="lg", square tiles sized for packshots, or a grid of LightboxTriggers; the editorial variant is a native scroll-snap column (wheel, trackpad, swipe, arrow keys) with a position rail. The colour picker is RadioSwatch, a radio dressed as a colour chip; the size picker is a ToggleGroup of outline pills, each named by a FieldGroup legend. Details fold into an Accordion; the fit note is an Alert, delivery or pickup a pair of RadioCards; specs are a DescriptionList.

Responsive#

Each preview renders inside an iframe, so the layout answers to the frame width. Photos and buy box sit side by side from lg and stack below it, photos first. On a phone the gallery is a swipe, with the thumbnails underneath as a second way through; on a wide screen the gallery pins beside the buy box while the details scroll. The editorial photos swipe sideways on a phone, one per stop with the rail beneath them; from lg they fill the left half edge to edge and scroll vertically.

FAQ#

A product's colour is data, the real colour of the object, not a theme role, so RadioSwatch takes it inline through its `color` prop. Everything around it (the ink selection ring, the gap cut in the ground colour, the hairline edge that keeps a pale swatch visible) still comes from tokens.