A large featured image above a row of thumbnails. Picking a thumbnail crossfades the feature with a slow settle, slides the caption in and restarts the autoplay progress.
Dune Hour
Erg Chebbi, the last light before dusk
npx shadcn@latest add https://hyperblur.dev/r/gallery-showcase.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/gallery-showcase.tsx.
import { GalleryShowcase } from "@/components/hyperblur/gallery-showcase"
<GalleryShowcase images={[{ title: "Dune Hour", caption: "Erg Chebbi" }, { title: "Harbor Lights" }]} />| Prop | Type | Default | Description |
|---|---|---|---|
| images | { src?: string; title: string; caption?: string }[] | 6 built-in scenes | Images to show. An entry without src renders a built-in gradient scene, so the gallery works with no assets. |
| value | number | Controlled index of the featured image. Pair with onChange. | |
| defaultValue | number | 0 | Initial featured image when uncontrolled. |
| onChange | (index: number) => void | Called when the featured image changes, by the user or by autoplay. | |
| autoplay | boolean | true | Advance on a timer shown as a progress line on the active thumbnail. Pauses on hover, focus and off-screen. Off under reduced motion. |
| interval | number | 4200 | Milliseconds each image stays featured during autoplay. |
| ratio | string | "16 / 9" | CSS aspect ratio of the featured image. |
| thumbHeight | number | 56 | Height of the thumbnail row in pixels. |
| accent | string | "#2f7bff" | Color of the active thumbnail ring and focus outlines. |
| label | string | "Image gallery" | Accessible name of the gallery. |