Interactive Bento Gallery

Galleries 2.1K

About

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

Code

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

Usage.tsx

import InteractiveBentoGallery from "@/components/blocks/interactive-bento-gallery"

const mediaItems = [
  {
    id: 1,
    type: "image",
    title: "Anurag Mishra",
    desc: "Driven, innovative, visionary",
    url: "https://kxptt4m9j4.ufs.sh/f/9YHhEDeslzkcbP3rYTiXwH7Y106CepJOsoAgQjyFi3MUfDkh",
    span: "md:col-span-1 md:row-span-3 sm:col-span-1 sm:row-span-2",
  },
  {
    id: 2,
    type: "video",
    title: "Dog Puppy",
    desc: "Adorable loyal companion.",
    url: "https://cdn.21st.dev/assets/mirror/6c/6c995774a9a2d0763b5cf31ced2d9e2872e67b29bbcbab5dc028510637a60ade.mp4",
    span: "md:col-span-2 md:row-span-2 col-span-1 sm:col-span-2 sm:row-span-2",
  },
  {
    id: 3,
    type: "image",
    title: "Forest Path",
    desc: "Mystical forest trail",
    url: "https://cdn.21st.dev/assets/mirror/d0/d069396ffe22f2757574c2ff4aa26195816e2e449c0310cdf3cd8ce6aa2721d8.jpg",
    span: "md:col-span-1 md:row-span-3 sm:col-span-2 sm:row-span-2 ",
  },
  {
    id: 4,
    type: "image",
    title: "Falling Leaves",
    desc: "Autumn scenery",
    url: "https://cdn.21st.dev/assets/mirror/5e/5e5cad2a41b4d6b5582db30ced443c4a41ec7d3bb48c6475675f78bf1fa48bf9.jpg",
    span: "md:col-span-2 md:row-span-2 sm:col-span-1 sm:row-span-2 ",
  },
  {
    id: 5,
    type: "video",
    title: "Bird Parrot",
    desc: "Vibrant feathered charm",
    url: "https://cdn.21st.dev/assets/mirror/bd/bd648f41dd331f6c94bdf8b0f22702e6c86f05ae70289a1095f848058f62b8f1.mp4",
    span: "md:col-span-1 md:row-span-3 sm:col-span-1 sm:row-span-2 ",
  },
  {
    id: 6,
    type: "image",
    title: "Beach Paradise",
    desc: "Sunny tropical beach",
    url: "https://cdn.21st.dev/assets/mirror/9c/9c62e3e3b4cebe1804ba802ec807ce1453dbea56be6cc87f72eb38b65e46a9cd.jpg",
    span: "md:col-span-2 md:row-span-2 sm:col-span-1 sm:row-span-2 ",
  },
  {
    id: 7,
    type: "video",
    title: "Shiva Temple",
    desc: "Peaceful Shiva sanctuary.",
    url: "https://cdn.21st.dev/assets/mirror/90/9055d429cbc2543497016f62bcb16e6ded4571e2eb5d8af706c8f285f141e70d.mp4",
    span: "md:col-span-1 md:row-span-3 sm:col-span-1 sm:row-span-2 ",
  },
]

export function BentoGridGalleryDemo() {
  return (
    <div className="min-h-screen overflow-y-auto">
      <InteractiveBentoGallery
        mediaItems={mediaItems}
        title="Gallery Shots Collection"
        description="Drag and explore our curated collection of shots"
      />
    </div>
  )
}