Browse components
Masonry
Animated masonry image grid: tiles fly in with a staggered blur-to-focus, glide to new slots on resize and zoom on hover.
Installation
npx shadcn@latest add @glint-ui/masonryFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/masonry.json
Usage
import { Masonry } from "@/components/ui/masonry";
<Masonry items={[{ src: "/a.jpg", ratio: 1.4, alt: "Dunes" }, { src: "/b.jpg", ratio: 0.8 }]} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | ReactNode | — | Array of { src, ratio (height / width), alt?, href? }. |
| minColumnWidth | number | 220 | Columns are as many as fit at this minimum width, in px. |
| gap | number | 16 | Px between tiles. |
| stagger | number | 0.05 | Seconds between each tile's entrance. |
| animateFrom | "bottom" | "top" | "left" | "right" | "center" | "bottom" | Where tiles fly in from. |
| blurToFocus | boolean | true | Tiles start blurred and come into focus. |
| hoverScale | number | 1.08 | Image zoom on hover (1 disables). |
| className | string | — | Extra classes for the root element. |