Masonry Grid

A responsive masonry-style image grid with hover animations and lightbox support.

Component preview

Install using CLI

npx shadcn@latest add "https://www.obsidianui.dev/r/masonry-grid.json"

Install Manually

Install dependencies

npm install motion clsx tailwind-merge

Add util file

Create a file lib/utils.ts:

import { ClassValue, clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';

export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}

Copy the source code

Copy the code into components/block/masonry-grid.tsx

Usage

Code

1import { MasonryGrid } from "@/components/block/masonry-grid"
2
3export function Demo() {
4return (
5  <MasonryGrid items={[{ image: "/image1.jpg", title: "Mountains", description: "A view from the summit" }]} />
6)
7}

Props

Prop	Type	Default	Description
items	`{ image: string; title: string; description: string }[]`	`Required`	Images with their title and description
columns	`number`	`Responsive: 1–4`	Optional fixed number of columns