Masonry
Pro
A responsive masonry grid whose tiles glide to new spots when the columns or the filter change.
Customize
3
14px
Hover lift
Installation
Masonry is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy masonry.tsx into components/ui and run npm install motion.
Usage
import { Masonry } from "@/components/ui/masonry";
<Masonry
filter={tag}
columns={{ 0: 1, 480: 2, 800: 3 }}
items={shots.map((s) => ({ id: s.id, height: s.height, src: s.url, alt: s.title, tags: s.tags }))}
/>Props
7 properties| Property | Type | Default | Description |
|---|---|---|---|
| items | { id, height, content?, src?, alt?, tags? }[] | — | Tiles with a height in pixels. Width comes from the column. |
| columns | number | Record<number, number> | { 0: 1, 420: 2, 640: 3, 900: 4 } | A fixed count, or counts keyed by minimum container width. |
| gap | number | 16 | Space between tiles in pixels. |
| filter | string | (item) => boolean | — | A tag to show ("all" shows everything), or your own test. Hidden tiles fade out and the rest re-flow. |
| hoverLift | boolean | true | Lifts tiles on hover and keyboard focus. |
| label | string | "Gallery" | Accessible name of the list. |
| className | string | — | Extra classes for the grid. |
Dependencies: motion