Loading…

Image Ring

beta

Images stood on a slowly turning ring — a circular gallery in CSS 3D that you can drag or turn with the arrow keys.

Display
1 file
No extra npm packages
Accessibility notes

Installation

The CLI installs use-in-view and use-reduced-motion as well, because this component imports them. Or copy everything in by hand.

$pnpm dlx @dowel-ui/cli add image-ring

No npm packages are needed beyond what Dowel already requires.

Usage

Imported from your own path — the file is yours, so this is an import like any other.

app/page.tsxTSX

import { ImageRing } from "@/components/ui/image-ring";

Examples

Every example the tests run, live and operable, side by side.

Default
Tilted

API

Generated from the component's own types, so a prop cannot appear here without existing.

<ImageRing>

Prop	Type	Default
`images` (required)	`ImageRingItem[]`	—
`label` (required) Names the gallery.	`string`	—
`duration` Seconds for one full turn on its own; 0 holds it still. Default 40.	`number`	`40`
`gap` Space between neighbours, in pixels. Default 16.	`number`	`16`
`itemHeight` Height of each image, in pixels. Default 220.	`number`	`220`
`itemWidth` Width of each image, in pixels. Default 160.	`number`	`160`
`tilt` Tilt of the ring toward the viewer, in degrees. Default -6.	`number`	`-6`

Plus every attribute of <div>.

Accessibility

A named region holding a list of images, so every alt text is read in order whatever is in front. Focus it and the arrow keys turn it one image at a time. It turns on its own only while nobody is pointing at or focused on it, while it is on screen and the tab is visible, and never under reduced motion — where a manual turn also jumps instead of easing.

Quality

Measured from the source and its tests at build time.

All scores

8/8

checks passed

Tested — passes
axe assertion — passes
Keyboard tested — passes
Storybook examples — passes
Accessibility documented — passes
Semantic tokens only — passes
Motion from tokens — does not apply
className merged — passes
Visible focus — does not apply
No fixed widths — passes

Prop

Type

Default

images

ImageRingItem[]

—

label

Names the gallery.

string

—

duration

Seconds for one full turn on its own; 0 holds it still. Default 40.

number

40

gap

Space between neighbours, in pixels. Default 16.

number

16

itemHeight

Height of each image, in pixels. Default 220.

number

220

itemWidth

Width of each image, in pixels. Default 160.

number

160

tilt

Tilt of the ring toward the viewer, in degrees. Default -6.

number

-6