Mountain landscapes
Here are some images matching your search
Image Gallery
Masonry grid with fullscreen lightbox viewer.
<ImageGallery images={[ { "id": "img-1", "src": "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&h=600&fit=crop", "alt": "Dramatic mountain peaks at sunrise with golden light", "width": 800, "height": 600, "title": "Alpine Sunrise", "caption": "Dolomites, Italy", "source": { "label": "Unsplash", "url": "https://unsplash.com" } }, { "id": "img-2", "src": "https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?w=800&h=1200&fit=crop", "alt": "Misty mountain valley with evergreen trees", "width": 800, "height": 1200, "title": "Misty Valley", "source": { "label": "Unsplash", "url": "https://unsplash.com" } }, { "id": "img-3", "src": "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&h=600&fit=crop", "alt": "Snow-covered mountain peak under starry night sky", "width": 800, "height": 600, "title": "Night Summit", "caption": "Mount Hood, Oregon" }, { "id": "img-4", "src": "https://images.unsplash.com/photo-1454496522488-7a8e488e8606?w=800&h=600&fit=crop", "alt": "Reflection of mountains in a crystal clear lake", "width": 800, "height": 600 }, { "id": "img-5", "src": "https://images.unsplash.com/photo-1486870591958-9b9d0d1dda99?w=800&h=1000&fit=crop", "alt": "Hiker standing on mountain ridge at sunset", "width": 800, "height": 1000, "title": "Summit View" } ]} title="Mountain landscapes" description="Here are some images matching your search" onImageClick={(id, image) => { console.log("Clicked:", id, image); }}/>Five images stacked vertically push the rest of the conversation off-screen. ImageGallery arranges multiple images in a masonry grid that respects each photo's aspect ratio, with a fullscreen lightbox for inspecting detail. Captions, source attribution, and keyboard navigation come built in.
Role: Information. For displaying data without user input. See Design Guidelines for how component roles work.
Getting Started
Run this once from your project root.
npx shadcn@latest add @tool-ui/image-galleryRender ImageGallery in your UI with tool-compatible props.
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)} /> );}Registration tells assistant-ui which component to render when a tool returns a set of images. Without it, tool results appear as raw JSON.
import { type Toolkit } from "@assistant-ui/react";import { ImageGallery } from "@/components/tool-ui/image-gallery";import { safeParseSerializableImageGallery } from "@/components/tool-ui/image-gallery/schema";import { createResultToolRenderer } from "@/components/tool-ui/shared";export const toolkit: Toolkit = { showImageGallery: { type: "backend", render: createResultToolRenderer({ safeParse: safeParseSerializableImageGallery, render: (parsedResult) => <ImageGallery {...parsedResult} />, }), },};Key Features
Masonry grid
Tiles images by aspect ratio so tall and wide shots sit together naturally
Fullscreen lightbox
Click any image to open it full-screen with title and caption
Smooth transitions
Animated layout shift from grid thumbnail to lightbox view
Props
Prop
Type
ImageGalleryItem
Prop
Type
Related
- Image: for displaying a single image with metadata and attribution
- Video: for inline video playback in the same media pattern
- Item Carousel: for browsable collections where each card has actions, not just images