Gallery Grid

Galleries

About

An image gallery grid of thumbnails that opens a fullscreen lightbox with keyboard arrow and escape navigation.

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

Code

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

Usage.tsx

"use client";

import { GalleryGrid, type GalleryImage } from "@/components/ui/gallery-grid";

function placeholder(color: string, label: string) {
  const svg = `<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><rect width='400' height='400' fill='${color}'/><text x='50%' y='50%' font-family='sans-serif' font-size='28' fill='white' text-anchor='middle' dominant-baseline='middle'>${label}</text></svg>`;
  return `data:image/svg+xml,${encodeURIComponent(svg)}`;
}

const demoImages: GalleryImage[] = [
  {
    id: "1",
    src: placeholder("#6366f1", "Photo 1"),
    alt: "Placeholder photo 1",
  },
  {
    id: "2",
    src: placeholder("#8b5cf6", "Photo 2"),
    alt: "Placeholder photo 2",
  },
  {
    id: "3",
    src: placeholder("#ec4899", "Photo 3"),
    alt: "Placeholder photo 3",
  },
  {
    id: "4",
    src: placeholder("#f59e0b", "Photo 4"),
    alt: "Placeholder photo 4",
  },
  {
    id: "5",
    src: placeholder("#10b981", "Photo 5"),
    alt: "Placeholder photo 5",
  },
  {
    id: "6",
    src: placeholder("#0ea5e9", "Photo 6"),
    alt: "Placeholder photo 6",
  },
];

export default function GalleryGridDemo() {
  return (
    <div className="w-full max-w-xl mx-auto p-6 bg-background text-foreground">
      <GalleryGrid images={demoImages} columns={3} />
    </div>
  );
}