Layout Grid

Bento grid of image tiles that expand in place to reveal rich content.

2.3 KB gzipped
Deps: motion/react
Reduced-motion safe
Base UI & Radix compatible

Open in v0

Installation

pnpm dlx shadcn@latest add https://velora.colorlib.com/r/layout-grid.json

Adds components/velora/layout-grid.tsx, installs motion.

Examples

Travel stories

A travel magazine grid where each destination opens into a short story.

Field notes

Travel stories

Open a story to read more

Props

Prop	Type	Default
`items*` Tiles, in reading order	`LayoutGridItem[]`	`—`

Also accepts every <div> attribute, forwarded to the root element.

LayoutGridItem

interface LayoutGridItem {
  /** Tile title — the tile's accessible name and the expanded heading */
  title: string;
  /** Cover image URL */
  src: string;
  /** Short line under the title on the tile */
  subtitle?: string;
  /** Rich content shown once the tile is expanded */
  content: React.ReactNode;
  /** Grid placement for the tile, e.g. "md:col-span-2" */
  className?: string;
}

Accessibility

Reduced motion: Tiles open and close instantly, with no shared-layout morph or dimming fade.
Keyboard: Each tile is a button; opening one moves focus to the expanded panel. Escape, the Close button or a click outside collapses it, and focus returns to the tile unless the click moved it elsewhere.
Screen readers: Tiles are buttons named by their title with aria-expanded; the expanded panel is a labelled region and the dimmed tiles behind it are inert.