Media gallery

A shop's own photos and loops in tiles — the first featured, loops playing muted while their tile is on screen (a still under reduced motion), a caption on the foot of a tile.

Web · ✓Mobile · n/aDesktop · ✓BetaMedia

import { MediaGallery } from "@krizaka/ui/media-gallery";

First snow

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

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

Why it is here. Used by Akinaza.

When to use

The « look inside » of a business page: its real photos and short clips.

When not to use

A feed of videos with creators, counts and a preview.Use instead: Media grid
Editing and ordering a profile's photos.Use instead: Photo grid
A demo gallery with titles and captions per piece.

Installation

Install

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

Styles

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

Import

import { MediaGallery } from "@krizaka/ui/media-gallery";

Examples

Shop

Three photos, the first featured, one with a caption.

First snow

Props

Photos and loops in tiles, the first featured; loops play while seen.

Prop	Type	Default	Description
`items`required	`readonly GalleryMedia[]`	—	The photos and loops, the featured one first.
`label`required	`string`	—	The gallery's accessible name, passed translated.

Accessibility

A list named by label; each tile is a figure with the photo's alt and its caption.
A loop is decorative (aria-hidden), starts only while its tile is on screen and never under reduced motion.

Best practices

Real photos only; every tile has alt text that says what it shows.
Give a landscape source shape="wide" so it is not cropped to a portrait.
Keep loops short and few: one or two per gallery.

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