Shop gallery

A shop's photos as a bento mosaic (one 2×2 lead, four tiles, the last one « + N photos »), a snap strip with a counter on a phone, and a lightbox with swipe, arrow keys and the alt text as caption. Fixed ratios, no layout shift; the lightbox is a lazy chunk.

Web · ✓Mobile · n/aDesktop · ✓BetaMedia

import { ShopGallery, shopGalleryLabels, shopGalleryLabelsFr } from "@krizaka/ui/shop-gallery";

Web only — React, from @krizaka/ui/shop-gallery. Beta: its API may still change in a minor version.

Mobile · n/a. A shop's public page is a web page. → Photo grid

Why it is here. Akinaza's shop pages (krizaka/akinaza#403): the « Photos » section as a mosaic that opens a lightbox, replacing the raw photo scroller.

When to use

The « Photos » section of a shop page: five to a few dozen real photos that a visitor looks at, then opens one by one.
Any set of still images where a quiet mosaic and a full-size viewer are enough.

When not to use

Photos mixed with muted loops and captions on the tiles.Use instead: Media gallery
A feed of creator videos with counts and a preview.Use instead: Media grid

Installation

Install

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Import

import { ShopGallery, shopGalleryLabels, shopGalleryLabelsFr } from "@krizaka/ui/shop-gallery";

Examples

Five photos

The bento at its fullest: a lead and four tiles; a snap strip on a phone.

Twelve photos

The last tile reads « + 8 photos » and opens the rest in the lightbox.

Three photos, in French

A short set stays a mosaic on every screen; labels in French.

Props

A shop's photos: a bento mosaic (one 2×2 lead and four tiles, the last one « + N photos »), a snap strip on a phone, and a lightbox.

Prop	Type	Default	Description
`label`required	`string`	—	The gallery's accessible name (`Photos of the salon`).
`photos`required	`readonly ShopGalleryPhoto[]`	—	The shop's photos, in order, already unique.
`labels`	`Partial<ShopGalleryLabels>`	—	Translated texts; `shopGalleryLabelsFr` for French.
`sizes`	`string`	—	The tiles' `sizes` (default: the bento's share of a 72 rem page on a desktop, 78 vw on a phone).

Accessibility

Each tile is a button named « Open photo 3 of 12: … »; the lightbox is a modal dialog with its focus trapped, and swiping works on touch.
Under reduced motion the hover zoom, the smooth strip scroll and the photo fade stop.

Keyboard

Keys	Action
`Tab / Enter / Space`	Move across the tiles and open one in the lightbox.
`← →`	Previous and next photo in the lightbox.
`Esc`	Close the lightbox; focus returns to the tile that opened it.

Best practices

Give each photo its alt: it names the tile for a screen reader and is the lightbox's caption.
Pass srcSet (400 / 800 / 1200 w) for the tiles and fullSrcSet for the lightbox; the tiles carry sizes and a fixed ratio, so the page never shifts.
From five photos on a phone the mosaic becomes a snap strip with a « 1 / N » counter; with fewer it stays a two-column mosaic.
Pass labels translated (shopGalleryLabelsFr for French); the host's text is never hard-coded here.

Generated from the code of @krizaka/ui 3.69.0: its meta.ts, its examples and its types.Edit this documentation on GitHub