A stack of photo cards. Drag the top one away with a tilt, or use the arrow keys, to reveal the next card underneath.
Swipe to browse
Drag the top card or use the arrow keys.
← →
npx shadcn@latest add https://hyperblur.dev/r/image-stack-swipe.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/image-stack-swipe.tsx.
import { ImageStackSwipe } from "@/components/hyperblur/image-stack-swipe"
<ImageStackSwipe images={["/a.jpg", "/b.jpg", "/c.jpg"]} width={240} />| Prop | Type | Default | Description |
|---|---|---|---|
| images | string[] | Image URLs. When empty or missing, four built-in gradient and SVG scenes are used. | |
| alt | string | "Photo" | Base accessible name. Each slide is announced as the alt text followed by its position, for example Photo 2 of 4. |
| width | number | string | "100%" | CSS width of the component. |
| height | number | string | CSS height. When omitted the height follows `aspect`. | |
| aspect | string | "4 / 3" | CSS aspect-ratio used when `height` is not set. |
| index | number | Controlled slide index. Pair with onChange. | |
| defaultIndex | number | 0 | Initial slide index when uncontrolled. |
| onChange | (index: number) => void | Called with the new slide index after every change, including automatic ones. | |
| onSwipe | (direction: "left" | "right", index: number) => void | Called when a card is flung away, with the direction and the index of the card that left. | |
| visible | number | 3 | Cards shown in the stack at once. |
| autoPlay | boolean | true | Flip the top card on a timer, alternating direction. Pauses on hover, drag and focus. |
| interval | number | 2600 | Milliseconds between automatic changes. |
| accent | string | "#2f7bff" | Color of focus rings and highlights. |