Masonry

Galleries 52

About

Beautiful image masonry collage

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Masonry to your project and fits it to your theme.

Code

How Masonry is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { Component } from "@/components/ui/masonry";

const data = [
  { id: 1, image: 'https://cdn.21st.dev/assets/mirror/6f/6f37ca0a75650f4febac0a744cb87cc0eb812d98f78db52e5659188d748b8dbf.jpg', height: 400 },
  { id: 2, image: 'https://cdn.21st.dev/assets/mirror/3d/3dabe26758c97acc42f88c8b0e42a5c6acc6a858e5f148e28fada7ab674cda70.jpg', height: 300 },
  { id: 3, image: 'https://cdn.21st.dev/assets/mirror/e2/e2bbc036bbb2d7da15d7b69cb33d4a228257a2e68f03c6101d1ada10136c5983.jpg', height: 300 },
  { id: 4, image: 'https://cdn.21st.dev/assets/mirror/b6/b612e055314f761ffa3eddc724b6e9b99b7098361ce048c38bdd0f111cb23b0c.jpg', height: 300 },
  { id: 5, image: 'https://cdn.21st.dev/assets/mirror/04/044d8b7160a79eb214925e69241ccd03a49ba8f82de113e86b8b0a5b9a6d5de7.jpg', height: 300 },
  { id: 6, image: 'https://cdn.21st.dev/assets/mirror/32/32bdc02d6ef4c65f8721f2c1e630455e17aa0f9f26a580b80482567f72bff059.jpg', height: 300 },
  { id: 7, image: 'https://cdn.21st.dev/assets/mirror/27/27d051dd45335aef728ad3ede64538434279e434f70bfd1f659d98b785a7eecc.jpg', height: 200 },
  { id: 8, image: 'https://cdn.21st.dev/assets/mirror/ac/acb8b7f207aaad87386a09cde38833f59b8ebee9334312ad626dac8ba07c67ea.jpg', height: 300 },
  { id: 9, image: 'https://cdn.21st.dev/assets/mirror/ef/ef5485afa13862322080459eda22c5e5d464692fcc7b5f806359b11f3cf716ac.jpg', height: 200 },
  { id: 10, image: 'https://cdn.21st.dev/assets/mirror/7d/7d46488f88ef194a3bb768efbabbb5692059a825dc6de471ac8431562f07934c.jpg', height: 400 },
  { id: 11, image: 'https://picsum.photos/id/105/200/300', height: 250 },
  { id: 12, image: 'https://cdn.21st.dev/assets/mirror/d5/d59d1b33ee5cf5b96364027451ac9f7246624f72e56d026ff9a834dbef9cc56a.jpg', height: 350 },
  { id: 13, image: 'https://cdn.21st.dev/assets/mirror/ed/ed8167ae329552d6fe42714ef648c5eeb10ffce3073b12b051a3932da85bd638.jpg', height: 420 },
  { id: 14, image: 'https://cdn.21st.dev/assets/mirror/c9/c9c6be78d72f35ad140200e194b6a49b428f838bb18889817c2efa967b70299e.jpg', height: 280 },
  { id: 15, image: 'https://cdn.21st.dev/assets/mirror/ca/caf16ebbc6235bbdad76776e852f462eb53919ff3f5f731fb5c0c02c407d02b5.jpg', height: 310 },
];

const DemoOne = () => {
  return (
    <div className="flex w-full h-screen justify-center items-center p-4 bg-gray-50 dark:bg-gray-950">
      <div className="w-full max-w-screen-xl mx-auto h-[80vh] overflow-auto border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg bg-white dark:bg-gray-900 p-4">
        <Component data={data} />
      </div>
    </div>
  );
};

export { DemoOne };