Skip to content

Lightbox

A grid of thumbnails. Each one grows into a full-screen view you can step or swipe through.

import { Lightbox } from '@brand-studio/ui';
import { beans, cameraViews, cup, pour } from '@/demos/assets';

export default function LightboxDemo() {
  return (
    <div style={{ width: '100%', maxWidth: 720, padding: '32px 0' }}>
      <Lightbox label="Field notes" images={[cup, beans, pour, cameraViews[0], cameraViews[2], cameraViews[5]]} />
    </div>
  );
}

Installation

pnpm add @brand-studio/ui

npm install @brand-studio/ui

yarn add @brand-studio/ui

bun add @brand-studio/ui

Install the peer dependencies
```
npm install react react-dom
```
Import the stylesheet once
```
import '@brand-studio/ui/styles.css';
```

Wrap your app in a brand theme

import { BrandTheme, Lightbox } from '@brand-studio/ui';
import brand from './brand.json';

<BrandTheme palette={brand.tokens} mode="system">
  {/* your app */}
</BrandTheme>

Usage

import { Lightbox } from '@brand-studio/ui';

<Lightbox label="Field notes" images={images} />

Accessibility

Thumbnails are buttons named by their image's alt text.
The full view is a native modal dialog: focus stays inside, Escape closes it and focus returns to the thumbnail.
Arrow keys step through images and the counter is announced.
With reduced motion the view opens and closes without growing.

API Reference

Prop	Type	Default
`images`	`ImageAsset[]`	–
`label?`	`string`	`'Gallery'`
`className?`	`string`	`''`