Skip to content

Ring Gallery

Images on a 3D ring you spin by dragging. It settles with one image facing you.

import { RingGallery } from '@brand-studio/ui';
import { cameraViews } from '@/demos/assets';

export default function RingGalleryDemo() {
  return (
    <div style={{ width: '100%' }}>
      <RingGallery label="Halden R, every angle" images={[...cameraViews, ...cameraViews.slice(0, 2)]} />
    </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, RingGallery } from '@brand-studio/ui';
import brand from './brand.json';

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

Usage

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

<RingGallery label="Every angle" images={images} />

Accessibility

The ring is a labelled carousel; only the image facing you is exposed to screen readers.
Previous and next buttons and arrow keys turn it one image at a time, and the counter is announced.
Dragging spins sideways only, so the page still scrolls on touch.
With reduced motion it turns without gliding.

API Reference

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