ObsidianUIObsidianUI
DocumentationMasonry Grid

Masonry Grid

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

Install using CLI

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

Install Manually

1

Install dependencies

npm install framer-motion clsx tailwind-merge
2

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));
}
3

Copy the source code

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

Usage

1import { MasonryGrid } from "@/components/ui/masonry-grid"
2

3export function Demo() {
4return (
5  <MasonryGrid images={["/image1.jpg", "/image2.jpg", "/image3.jpg"]} />
6)
7}

Props

Prop NameTypeDefaultDescription
imagesstring[]-Array of image URLs
columnsnumber3Number of columns
Masked AvatarsNeumorphism 3D Button