The Masonry Layout is a grid layout that arranges items in a way that optimizes space and creates a visually appealing design.

Preview

Responsive Masonry Layout

Nature Photography

Beautiful landscapes and wildlife captured in stunning detail

Landscapes

Mountain Views

Scenic mountain ranges and majestic peaks reaching for the sky

Mountains

City Life

Urban photography showcasing modern architecture and vibrant street scenes

Urban

Sunset Collection

Golden hour moments that paint the sky in warm, ethereal colors

Sunsets

Ocean Waves

Peaceful coastal scenes with rhythmic waves and endless horizons

Ocean

Forest Path

Mystical woodland trails surrounded by ancient trees and dappled light

Forest

Abstract Art

Creative digital compositions exploring form, color, and imagination

Abstract

Desert Landscape

Vast sandy horizons where silence meets infinite space

Desert

Winter Wonderland

Snow-covered landscapes creating a pristine, magical atmosphere

Winter

Street Photography

Candid moments capturing the authentic rhythm of daily life

Street

Architectural Marvels

Modern building designs that push the boundaries of form and function

Architecture

Garden Blooms

Colorful flower collections celebrating nature's artistic palette

Flowers

Installation

NPM

npx shadcn@latest add "https://21st.dev/r/preetsuthar17/responsive-masonry-layout?api_key=eyJhbGciOiJSUzI1NiIsImNhdCI6ImNsX0I3ZDRQRDIyMkFBQSIsImtpZCI6Imluc18ybXdGd3U1cW5FQXozZ1U2dmxnMW13ZU1PZEoiLCJ0eXAiOiJKV1QifQ.eyJhenAiOiJodHRwczovLzIxc3QuZGV2IiwiZXhwIjoxNzQ4MjU0OTU1LCJpYXQiOjE3NDgyNTQwNTUsImlzcyI6Imh0dHBzOi8vY2xlcmsuMjFzdC5kZXYiLCJqdGkiOiI1NjRjYWViNTZiOTEwZTc5OTc4NyIsIm5iZiI6MTc0ODI1NDA1MCwic3ViIjoidXNlcl8ycldvbEN1Um5KVzNEUml1UTVKSHJsNWtqOGEifQ.OcLAo77T-okmQ05YDCkUgPPRTjSOtBBLu4bty7nvBl2u23bQCSLFrZn-Fg9rvsvJb7iT_WC-4WBnxVm2TWIOV3wqA2uCt5z8orV3DZPzAiFfS9UeonwzDatv-oDzQFyOUE6ui10wEZHclos4-Cj9nfsphJ-fMBFCW4y8ghQyPsWy-m-yhribtpc_M8lVv67T7wyClfByeNBmKrvOUdwy7xfITKxd8L7UXiKb6PKy1R3oSc40YyMlUdj-hLWF7xAIsg_8iumxdPBLVxmSBA8g07aFFKOe5QggLt1iA_eJpWsyhz119KL0HXuvHbuQC00uUhTdACFS5x4brRGqr3BkFQ"

Usage

App.tsx

const MasonryDemo = () => {
  const imageCards = [
    <div
      key="1"
      className="group bg-white rounded-xl shadow-2xl/10 border-0 overflow-hidden transition-all duration-300 hover:-translate-y-1"
    >
      <div className="relative overflow-hidden p-4">
        <img
          src="https://picsum.photos/400/300?random=1"
          alt="Nature Photography"
          className="w-full h-48 object-cover rounded-md transition-transform duration-300 group-hover:scale-105"
        />
      </div>
      <div className="p-5">
        <h3 className="font-semibold text-gray-900 text-lg mb-2 group-hover:text-blue-600 transition-colors">
          Nature Photography
        </h3>
        <p className="text-gray-600 text-sm leading-relaxed">
          Beautiful landscapes and wildlife captured in stunning detail
        </p>
        <div className="mt-3 flex items-center text-xs text-gray-400">
          <span className="bg-green-100 text-green-700 px-2 py-1 rounded-full">
            Landscapes
          </span>
        </div>
      </div>
    </div>,

    <div
      key="2"
      className="group bg-white rounded-xl shadow-2xl/10 border-0 overflow-hidden transition-all duration-300 hover:-translate-y-1"
    >
      <div className="relative overflow-hidden p-4">
        <img
          src="https://picsum.photos/400/400?random=2"
          alt="Mountain Views"
          className="w-full h-64 object-cover rounded-md transition-transform duration-300 group-hover:scale-105"
        />
      </div>
      <div className="p-5">
        <h3 className="font-semibold text-gray-900 text-lg mb-2 group-hover:text-blue-600 transition-colors">
          Mountain Views
        </h3>
        <p className="text-gray-600 text-sm leading-relaxed">
          Scenic mountain ranges and majestic peaks reaching for the sky
        </p>
        <div className="mt-3 flex items-center text-xs text-gray-400">
          <span className="bg-blue-100 text-blue-700 px-2 py-1 rounded-full">
            Mountains
          </span>
        </div>
      </div>
    </div>,

    <div
      key="3"
      className="group bg-white rounded-xl shadow-2xl/10 border-0 overflow-hidden transition-all duration-300 hover:-translate-y-1"
    >
      <div className="relative overflow-hidden p-4">
        <img
          src="https://picsum.photos/400/200?random=3"
          alt="City Life"
          className="w-full h-32 object-cover rounded-md transition-transform duration-300 group-hover:scale-105"
        />
      </div>
      <div className="p-5">
        <h3 className="font-semibold text-gray-900 text-lg mb-2 group-hover:text-blue-600 transition-colors">
          City Life
        </h3>
        <p className="text-gray-600 text-sm leading-relaxed">
          Urban photography showcasing modern architecture and vibrant street
          scenes
        </p>
        <div className="mt-3 flex items-center text-xs text-gray-400">
          <span className="bg-purple-100 text-purple-700 px-2 py-1 rounded-full">
            Urban
          </span>
        </div>
      </div>
    </div>,

    <div
      key="4"
      className="group bg-white rounded-xl shadow-2xl/10 border-0 overflow-hidden transition-all duration-300 hover:-translate-y-1"
    >
      <div className="relative overflow-hidden p-4">
        <img
          src="https://picsum.photos/400/350?random=4"
          alt="Sunset Collection"
          className="w-full h-56 object-cover rounded-md transition-transform duration-300 group-hover:scale-105"
        />
      </div>
      <div className="p-5">
        <h3 className="font-semibold text-gray-900 text-lg mb-2 group-hover:text-blue-600 transition-colors">
          Sunset Collection
        </h3>
        <p className="text-gray-600 text-sm leading-relaxed">
          Golden hour moments that paint the sky in warm, ethereal colors
        </p>
        <div className="mt-3 flex items-center text-xs text-gray-400">
          <span className="bg-orange-100 text-orange-700 px-2 py-1 rounded-full">
            Sunsets
          </span>
        </div>
      </div>
    </div>,

    <div
      key="5"
      className="group bg-white rounded-xl shadow-2xl/10 border-0 overflow-hidden transition-all duration-300 hover:-translate-y-1"
    >
      <div className="relative overflow-hidden p-4">
        <img
          src="https://picsum.photos/400/280?random=5"
          alt="Ocean Waves"
          className="w-full h-44 object-cover rounded-md transition-transform duration-300 group-hover:scale-105"
        />
      </div>
      <div className="p-5">
        <h3 className="font-semibold text-gray-900 text-lg mb-2 group-hover:text-blue-600 transition-colors">
          Ocean Waves
        </h3>
        <p className="text-gray-600 text-sm leading-relaxed">
          Peaceful coastal scenes with rhythmic waves and endless horizons
        </p>
        <div className="mt-3 flex items-center text-xs text-gray-400">
          <span className="bg-cyan-100 text-cyan-700 px-2 py-1 rounded-full">
            Ocean
          </span>
        </div>
      </div>
    </div>,

    <div
      key="6"
      className="group bg-white rounded-xl shadow-2xl/10 border-0 overflow-hidden transition-all duration-300 hover:-translate-y-1"
    >
      <div className="relative overflow-hidden p-4">
        <img
          src="https://picsum.photos/400/320?random=6"
          alt="Forest Path"
          className="w-full h-52 object-cover rounded-md transition-transform duration-300 group-hover:scale-105"
        />
      </div>
      <div className="p-5">
        <h3 className="font-semibold text-gray-900 text-lg mb-2 group-hover:text-blue-600 transition-colors">
          Forest Path
        </h3>
        <p className="text-gray-600 text-sm leading-relaxed">
          Mystical woodland trails surrounded by ancient trees and dappled light
        </p>
        <div className="mt-3 flex items-center text-xs text-gray-400">
          <span className="bg-emerald-100 text-emerald-700 px-2 py-1 rounded-full">
            Forest
          </span>
        </div>
      </div>
    </div>,

    <div
      key="7"
      className="group bg-white rounded-xl shadow-2xl/10 border-0 overflow-hidden transition-all duration-300 hover:-translate-y-1"
    >
      <div className="relative overflow-hidden p-4">
        <img
          src="https://picsum.photos/400/380?random=7"
          alt="Abstract Art"
          className="w-full h-60 object-cover rounded-md transition-transform duration-300 group-hover:scale-105"
        />
      </div>
      <div className="p-5">
        <h3 className="font-semibold text-gray-900 text-lg mb-2 group-hover:text-blue-600 transition-colors">
          Abstract Art
        </h3>
        <p className="text-gray-600 text-sm leading-relaxed">
          Creative digital compositions exploring form, color, and imagination
        </p>
        <div className="mt-3 flex items-center text-xs text-gray-400">
          <span className="bg-pink-100 text-pink-700 px-2 py-1 rounded-full">
            Abstract
          </span>
        </div>
      </div>
    </div>,

    <div
      key="8"
      className="group bg-white rounded-xl shadow-2xl/10 border-0 overflow-hidden transition-all duration-300 hover:-translate-y-1"
    >
      <div className="relative overflow-hidden p-4">
        <img
          src="https://picsum.photos/400/250?random=8"
          alt="Desert Landscape"
          className="w-full h-40 object-cover rounded-md transition-transform duration-300 group-hover:scale-105"
        />
      </div>
      <div className="p-5">
        <h3 className="font-semibold text-gray-900 text-lg mb-2 group-hover:text-blue-600 transition-colors">
          Desert Landscape
        </h3>
        <p className="text-gray-600 text-sm leading-relaxed">
          Vast sandy horizons where silence meets infinite space
        </p>
        <div className="mt-3 flex items-center text-xs text-gray-400">
          <span className="bg-yellow-100 text-yellow-700 px-2 py-1 rounded-full">
            Desert
          </span>
        </div>
      </div>
    </div>,

    <div
      key="9"
      className="group bg-white rounded-xl shadow-2xl/10 border-0 overflow-hidden transition-all duration-300 hover:-translate-y-1"
    >
      <div className="relative overflow-hidden p-4">
        <img
          src="https://picsum.photos/400/360?random=9"
          alt="Winter Wonderland"
          className="w-full h-56 object-cover rounded-md transition-transform duration-300 group-hover:scale-105"
        />
      </div>
      <div className="p-5">
        <h3 className="font-semibold text-gray-900 text-lg mb-2 group-hover:text-blue-600 transition-colors">
          Winter Wonderland
        </h3>
        <p className="text-gray-600 text-sm leading-relaxed">
          Snow-covered landscapes creating a pristine, magical atmosphere
        </p>
        <div className="mt-3 flex items-center text-xs text-gray-400">
          <span className="bg-slate-100 text-slate-700 px-2 py-1 rounded-full">
            Winter
          </span>
        </div>
      </div>
    </div>,

    <div
      key="10"
      className="group bg-white rounded-xl shadow-2xl/10 border-0 overflow-hidden transition-all duration-300 hover:-translate-y-1"
    >
      <div className="relative overflow-hidden p-4">
        <img
          src="https://picsum.photos/400/290?random=10"
          alt="Street Photography"
          className="w-full h-48 object-cover rounded-md transition-transform duration-300 group-hover:scale-105"
        />
      </div>
      <div className="p-5">
        <h3 className="font-semibold text-gray-900 text-lg mb-2 group-hover:text-blue-600 transition-colors">
          Street Photography
        </h3>
        <p className="text-gray-600 text-sm leading-relaxed">
          Candid moments capturing the authentic rhythm of daily life
        </p>
        <div className="mt-3 flex items-center text-xs text-gray-400">
          <span className="bg-gray-100 text-gray-700 px-2 py-1 rounded-full">
            Street
          </span>
        </div>
      </div>
    </div>,

    <div
      key="11"
      className="group bg-white rounded-xl shadow-2xl/10 border-0 overflow-hidden transition-all duration-300 hover:-translate-y-1"
    >
      <div className="relative overflow-hidden p-4">
        <img
          src="https://picsum.photos/400/420?random=11"
          alt="Architectural Marvels"
          className="w-full h-68 object-cover rounded-md transition-transform duration-300 group-hover:scale-105"
        />
      </div>
      <div className="p-5">
        <h3 className="font-semibold text-gray-900 text-lg mb-2 group-hover:text-blue-600 transition-colors">
          Architectural Marvels
        </h3>
        <p className="text-gray-600 text-sm leading-relaxed">
          Modern building designs that push the boundaries of form and function
        </p>
        <div className="mt-3 flex items-center text-xs text-gray-400">
          <span className="bg-indigo-100 text-indigo-700 px-2 py-1 rounded-full">
            Architecture
          </span>
        </div>
      </div>
    </div>,

    <div
      key="12"
      className="group bg-white rounded-xl shadow-2xl/10 border-0 overflow-hidden transition-all duration-300 hover:-translate-y-1"
    >
      <div className="relative overflow-hidden p-4">
        <img
          src="https://picsum.photos/400/240?random=12"
          alt="Garden Blooms"
          className="w-full h-36 object-cover rounded-md transition-transform duration-300 group-hover:scale-105"
        />
      </div>
      <div className="p-5">
        <h3 className="font-semibold text-gray-900 text-lg mb-2 group-hover:text-blue-600 transition-colors">
          Garden Blooms
        </h3>
        <p className="text-gray-600 text-sm leading-relaxed">
          Colorful flower collections celebrating nature's artistic palette
        </p>
        <div className="mt-3 flex items-center text-xs text-gray-400">
          <span className="bg-rose-100 text-rose-700 px-2 py-1 rounded-full">
            Flowers
          </span>
        </div>
      </div>
    </div>,
  ];

  return (
    <div className={` h-full py-16 px-6`}>
      <div className="max-w-7xl mx-auto space-y-20">
        {/* Header */}
        <div className="text-center">
          <h1 className="text-5xl font-bold bg-gradient-to-r from-gray-900 to-gray-600 bg-clip-text text-transparent mb-6">
            Responsive Masonry Layout
          </h1>
        </div>

        {/* Image Gallery Demo */}
        <section>
          <Masonry>{imageCards}</Masonry>
        </section>
      </div>
    </div>
  );
};

export { MasonryDemo };