About
A strip of thumbnails where a click opens the shot large above the page: arrows, a "3 of 12" counter, and the focus trap and Escape inherited from the native dialog. From VibeUI — 1,600+ components with agent-ready install briefs at vibeui.club.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Gallery With Lightbox to your project and fits it to your theme.
Code
How Gallery With Lightbox is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import { Carousel017 } from "@/components/ui/vibeui-carousel-017"
export default function Demo() {
return <Carousel017 {...{"defaultOpen":true,"label":"Route shoot","counter":"{n} of {total}","prevLabel":"Previous shot","nextLabel":"Next shot","closeLabel":"Close","shots":[{"title":"Dawn over the fjord","hue":250,"image":"/demo/scenes/scene-05.webp"},{"title":"Terrace by the water","hue":196,"image":"/demo/scenes/scene-23.webp"},{"title":"Pines in the fog","hue":156,"image":"/demo/scenes/scene-15.webp"},{"title":"A field in July","hue":104,"image":"/demo/scenes/scene-11.webp"},{"title":"Sand slope","hue":64,"image":"/demo/scenes/scene-05.webp"},{"title":"Sunset on the highway","hue":32,"image":"/demo/scenes/scene-23.webp"},{"title":"Night block","hue":300,"image":"/demo/scenes/scene-15.webp"},{"title":"Shop window in the rain","hue":274,"image":"/demo/scenes/scene-11.webp"}]}} />
}
More in Galleries
View all
Thumbnail image viewer
40
Animated Gallery
1.4K
Hero Section 6
879
Editorial Collage Hero
427
Layout Grid
823
3D Parallax Unfurling Gallery
973
Tilted Grid Hero
1.4K
Elastic Gallery
904
