Getting Started
Templates
Components
| Prop | Type | Default | Description |
|---|---|---|---|
items | MasonryGridItem[] | DEFAULT_ITEMS | Array of items to display in the grid |
columnsMobile |
number3 |
| Number of columns on mobile screens |
columnsDesktop | number | 5 | Number of columns on desktop screens |
gap | number | 6 | Gap between items (Tailwind spacing scale) |
onItemClick | (item: MasonryGridItem) => void | undefined | Callback when an item is clicked |
showLoadingSkeleton | boolean | true | Show loading skeleton while images load |
className | string | undefined | Additional CSS classes |
| Property | Type | Required | Description |
|---|---|---|---|
id | string | Yes | Unique identifier |
name | string | Yes | Display name (shown on hover) |
image | string | No | Image URL |
href | string | No | Link destination |
prefers-reduced-motionhref for each itemonItemClick callback for custom actionsimport { MasonryGrid, type MasonryGridItem } from "@/components/ui/masonry-grid"
const items: MasonryGridItem[] = [
{ id: "1", name: "Photo 1", image: "/images/photo-1.jpg" },
{ id: "2", name: "Photo 2", image: "/images/photo-2.jpg" },
{ id: "3", name: "Photo 3", image: "/images/photo-3.jpg" },
]
export default function Example() {
return <MasonryGrid items={items} />
}<MasonryGrid
items={items}
onItemClick={(item) => {
console.log("Clicked:", item.name)
// Open modal, navigate, etc.
}}
/><MasonryGrid items={items} columnsMobile={2} columnsDesktop={4} gap={4} />const items: MasonryGridItem[] = [
{ id: "1", name: "Project A", image: "/projects/a.jpg", href: "/projects/a" },
{ id: "2", name: "Project B", image: "/projects/b.jpg", href: "/projects/b" },
]
<MasonryGrid items={items} /><MasonryGrid items={items} showLoadingSkeleton={false} />const items: MasonryGridItem[] = [
{ id: "1", name: "Alice", href: "/users/alice" },
{ id: "2", name: "Bob", href: "/users/bob" },
{ id: "3", name: "Charlie", href: "/users/charlie" },
]
// Items without images show the first letter of the name
<MasonryGrid items={items} />