Responsive column layout for mixed-height blocks, with a staggered entrance.
npx shadcn@latest add https://hyperblur.dev/r/masonry.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/masonry.tsx.
import { Masonry } from "@/components/hyperblur/masonry"
<Masonry columns={{ base: 1, sm: 2, lg: 4 }} gap={16}><Card /><Card /><Card /></Masonry>| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | required | Items to lay out. Each child becomes one block. |
| columns | number | { base?: number; sm?: number; md?: number; lg?: number } | { base: 1, sm: 2, lg: 3 } | Column count, or a breakpoint map (sm 640px, md 768px, lg 1024px). Missing keys inherit the previous breakpoint. |
| gap | number | 16 | Gap between columns and between items, in pixels. |
| stagger | number | 0.05 | Seconds between each item's entrance. |