Photo Stack
betaA pile of photos: flick the top one away and it springs to the back, or tap, key or button through them.
- Display
- 1 file
- 2 npm packages
- Accessibility notes
- Animates with motion
Loading the example…
pnpm dlx @dowel-ui/cli add photo-stacknpm packages installed: motion, radix-ui.
import { PhotoStack } from "@/components/ui/photo-stack";Default
Gallery
With Controls
Right To Left
<PhotoStack>
| Prop | Type | Default |
|---|---|---|
photos (required)The photos. The first starts on top. | PhotoStackPhoto[] | — |
controlsShows previous and next buttons under the stack. | boolean | false |
defaultIndexThe photo on top at first (uncontrolled). | number | 0 |
indexThe photo on top (controlled). | number | — |
onIndexChangeCalled when another photo comes to the top. | (index: number) => void | — |
Plus every attribute of <div>.
A carousel region (aria-roledescription="carousel") of labelled slides; only the top photo is exposed, the rest are aria-hidden and inert. The top photo carries a real button ("Show next photo") so Enter and Space cycle it; arrow keys move either way (mirrored in right-to-left layouts); optional previous/next buttons give a visible pointer-free path; a polite status region announces the new photo. Dragging is a convenience on top of these and is switched off under reduced motion, where cards also move without animating.
10/10
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — passes
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — passes
- className merged — passes
- Visible focus — passes
- No fixed widths — passes