A thumbnail strip where each image opens in a lightbox. The picture zooms out of its thumbnail and flies back on close, with previous and next, Escape and a focus trap.
Coastal route
8 photosClick a photo to open it full screen
npx shadcn@latest add https://hyperblur.dev/r/carousel-lightbox.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/carousel-lightbox.tsx.
import { CarouselLightbox } from "@/components/hyperblur/carousel-lightbox"
<CarouselLightbox images={[{ src: "/coast.jpg", alt: "Coast", caption: "Coast at dawn" }]} />| Prop | Type | Default | Description |
|---|---|---|---|
| images | { src?: string; alt?: string; caption?: string }[] | Images to show. Entries without a src render a built-in gradient scene. Eight scenes are used when omitted. | |
| thumbWidth | number | 112 | Thumbnail width in pixels. Height follows a 4:3 ratio. |
| accent | string | "#2f7bff" | Focus ring color. |