Mountain landscapes
Here are some images matching your search
Here are some images matching your search
import { ImageGallery } from "@/components/tool-ui/image-gallery";export function Example() { return ( <ImageGallery id="image-gallery-example" title="Mountain landscapes" description="Here are some images matching your search" images={[ { id: "img-1", src: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&h=600&fit=crop", alt: "Dramatic mountain peaks at sunrise", width: 800, height: 600, title: "Alpine Sunrise", caption: "Dolomites, Italy", }, { id: "img-2", src: "https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?w=800&h=1200&fit=crop", alt: "Misty mountain valley", width: 800, height: 1200, title: "Misty Valley", }, // ... more images ]} onImageClick={(id, image) => console.log("Clicked:", id, image)} /> );}Responsive grid that adapts to image aspect ratios
Click any image to view in a fullscreen lightbox
Shared layout animations between grid and lightbox
Cap visible images with a "+N more" overlay
Copy components/tool-ui/image-gallery and the shared directory into your project.
pnpm dlx shadcn@latest add buttonProp
Type
Prop
Type
Use maxVisible to cap the grid display while keeping all images accessible in the lightbox:
<ImageGallery id="limited-gallery" images={/* 12 images */} maxVisible={4}/>The last visible thumbnail shows a "+N more" overlay that opens the lightbox at the first hidden image.
import { ImageGallery } from "@/components/tool-ui/image-gallery";
export function Example() {
return (
<ImageGallery
id="image-gallery-example"
title="Mountain landscapes"
description="Here are some images matching your search"
images={[
{
id: "img-1",
src: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&h=600&fit=crop",
alt: "Dramatic mountain peaks at sunrise",
width: 800,
height: 600,
title: "Alpine Sunrise",
caption: "Dolomites, Italy",
},
{
id: "img-2",
src: "https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?w=800&h=1200&fit=crop",
alt: "Misty mountain valley",
width: 800,
height: 1200,
title: "Misty Valley",
},
// ... more images
]}
onImageClick={(id, image) => console.log("Clicked:", id, image)}
/>
);
}pnpm dlx shadcn@latest add button<ImageGallery
id="limited-gallery"
images={/* 12 images */}
maxVisible={4}
/>