A grid of image cards. Opening a card grows it from its own spot to fill the grid with the title and caption; Back or Escape shrinks it back into place.
npx shadcn@latest add https://hyperblur.dev/r/gallery-grid-expand.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/gallery-grid-expand.tsx.
import { GalleryGridExpand } from "@/components/hyperblur/gallery-grid-expand"
<GalleryGridExpand columns={3} onChange={(i) => console.log(i)} />| Prop | Type | Default | Description |
|---|---|---|---|
| images | { src?: string; title: string; caption?: string }[] | 6 built-in scenes | Images to show. An entry without src renders a built-in gradient scene, so the gallery works with no assets. |
| value | number | null | Controlled index of the open card, or null when the grid is showing. Pair with onChange. | |
| defaultValue | number | null | null | Card open on first render when uncontrolled. |
| onChange | (index: number | null) => void | Called when the user opens a card, moves to another one or closes it. | |
| columns | number | 3 | Number of grid columns. Drops to two in containers under 260px. |
| gap | number | 8 | Space between cards in pixels. |
| ratio | string | "4 / 3" | CSS aspect ratio of each card. |
| idle | boolean | true | Open and close cards on its own until the pointer or focus arrives. Uncontrolled only, off under reduced motion. |
| accent | string | "#2f7bff" | Focus ring color. |
| label | string | "Gallery" | Accessible name of the gallery. |