Image grid
One to four images in a fixed-shape grid, with a +N tile for the rest and a shared lightbox you can page through.
On this page
Seven research results in four tiles, with a +N count that opens the lightbox.
Installation
Usage
import { ImageGrid } from "@/components/ui/chatcn/image-grid"
<ImageGrid images={results.map((r) => ({ src: r.url, alt: r.title, placeholder: r.thumb }))} />Examples
Layouts
One image keeps its own shape. Two sit side by side, three lead with a tall tile, four make a square. The grid keeps its shape while images load, so the message never jumps.
One, two, three and four image layouts.
Props
| Prop | Type | Notes |
|---|---|---|
images | ImageSource[] | { src, alt, width?, height?, placeholder?, caption?, filename? } |
max | number | Tiles before the last one shows +N. Default and maximum 4 |
download | boolean | Download action in the lightbox. Default true |
Keyboard
| Key | Action |
|---|---|
Tab | Move between tiles |
Enter, Space | Open the lightbox at that image |
Left, Right | Page through every image, including the hidden ones |
Esc | Close the lightbox |
Accessibility
- Each tile is a button named after its image. The +N tile says how many more images it opens.
- The lightbox counter reads 3 of 7 in tabular figures.
Motion
- Tiles fade in as their images decode, each on its own schedule. There is no stagger.
- The +N wash lightens on hover over 150 ms, on fine pointers only.