Components
Loading preview...
Masonry Grid A responsive, animated, and customizable masonry grid layout component, perfect for displaying items of varying heights in a visually appealing way.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/masonry-grid// demo.tsx
import React from 'react';
import MasonryGrid from '@/components/ui/masonry-grid'; // Adjust path as needed
// Sample data for the demo
const galleryItems = [
{ id: 1, src: 'https://images.unsplash.com/photo-1757351122506-3c6a394e9cd8?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDYxfHRvd0paRnNrcEdnfHxlbnwwfHx8fHw%3D' },
{ id: 2, src: 'https://images.unsplash.com/photo-1756804528328-8ac54d25b49e?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDg1fHRvd0paRnNrcEdnfHxlbnwwfHx8fHw%3D' },
{ id: 3, src: 'https://images.unsplash.com/photo-1756634355438-3a6837b62e11?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDk2fHRvd0paRnNrcEdnfHxlbnwwfHx8fHw%3D?w=800&h=1000' },
{ id: 4, src: 'https://images.unsplash.com/photo-1756489362450-72d440d52a2d?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDExNHx0b3dKWkZza3BHZ3x8ZW58MHx8fHx8' },
{ id: 5, src: 'https://images.unsplash.com/photo-1534083220759-4c3c00112ea0?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDEzM3x0b3dKWkZza3BHZ3x8ZW58MHx8fHx8' },
{ id: 6, src: 'https://images.unsplash.com/photo-1756408263381-ed1488d9b1ea?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDEyOXx0b3dKWkZza3BHZ3x8ZW58MHx8fHx8' },
{ id: 7, src: 'https://images.unsplash.com/photo-1755529905229-e0536cf889d7?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDE0MXx0b3dKWkZza3BHZ3x8ZW58MHx8fHx8' },
{ id: 8, src: 'https://images.unsplash.com/photo-1742201949674-a5084b01418c?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDI1Mnx0b3dKWkZza3BHZ3x8ZW58MHx8fHx8' },
{ id: 9, src: 'https://images.unsplash.com/photo-1594234591488-128c2968837a?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDI4MHx0b3dKWkZza3BHZ3x8ZW58MHx8fHx8' },
{ id: 10, src: 'https://images.unsplash.com/photo-1753828335589-8fee07cb4cec?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDI4NHx0b3dKWkZza3BHZ3x8ZW58MHx8fHx8' },
{ id: 11, src: 'https://images.unsplash.com/photo-1700234272458-cdad09b6b7ba?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDI5OHx0b3dKWkZza3BHZ3x8ZW58MHx8fHx8' },
{ id: 12, src: 'https://images.unsplash.com/photo-1676211505690-673cb85feaa4?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDEwfHx8ZW58MHx8fHx8' },
{ id: 13, src: 'https://images.unsplash.com/photo-1683660107710-c8464f63d1b6?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDE4fHx8ZW58MHx8fHx8' },
{ id: 8, src: 'https://plus.unsplash.com/premium_photo-1672239496290-5061cfee7ebb?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTN8fG1hbnxlbnwwfHwwfHx8MA%3D%3D' },
{ id: 9, src: 'https://images.unsplash.com/photo-1600486913747-55e5470d6f40?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTh8fG1hbnxlbnwwfHwwfHx8MA%3D%3D' },
{ id: 10, src: 'https://images.unsplash.com/photo-1453396450673-3fe83d2db2c4?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTF8fG1hbnxlbnwwfHwwfHx8MA%3D%3D' },
{ id: 11, src: 'https://images.unsplash.com/photo-1534614971-6be99a7a3ffd?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDN8fG1hbnxlbnwwfHwwfHx8MA%3D%3D' },
{ id: 12, src: 'https://images.unsplash.com/photo-1492288991661-058aa541ff43?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NTZ8fG1hbnxlbnwwfHwwfHx8MA%3D%3D' },
{ id: 13, src: 'https://images.unsplash.com/photo-1542190891-2093d38760f2?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OTh8fG1hbnxlbnwwfHwwfHx8MA%3D%3D' }
];
const MasonryGridDemo = () => {
return (
<div className="w-full min-h-screen bg-background p-4 sm:p-6 md:p-8">
<div className="max-w-7xl mx-auto">
<div className="text-center mb-12">
<h1 className="text-3xl md:text-5xl font-bold text-foreground mb-2">
Inspiration Gallery
</h1>
<p className="text-lg text-muted-foreground">
A showcase of nature's beauty
</p>
</div>
<MasonryGrid
items={galleryItems}
// Responsive columns controlled by Tailwind classes
className="columns-1 sm:columns-2 lg:columns-3 xl:columns-4"
gap="1rem"
renderItem={(item) => (
<div className="overflow-hidden rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 ease-in-out bg-card">
<img
src={item.src}
alt={`Gallery item ${item.id}`}
className="w-full h-auto object-cover"
loading="lazy"
/>
</div>
)}
/>
</div>
</div>
);
};
export default MasonryGridDemo;