Image gallery lightbox

Pro

Listing photo grid that opens a shared layout lightbox with arrows, keyboard control and thumbnails.

app/page.tsx

import { ImageGalleryLightbox, type GalleryImage } from "@/components/facade/image-gallery-lightbox";

const rooms: Array<[string, string]> = [
  ["Exterior", "Front elevation of a modern Spanish revival home at dusk"],
  ["Great room", "Great room with 18 ft ceilings and stone fireplace"],
  ["Kitchen", "Chef's kitchen with quartz waterfall island"],
  ["Primary suite", "Primary suite opening to a private courtyard"],
  ["Pool", "Heated saltwater pool with desert landscaping"],
  ["Primary bath", "Spa bath with freestanding soaking tub"],
  ["Dining", "Formal dining room with wine wall"],
  ["Office", "Home office with built-in shelving"],
  ["Guest suite", "Casita guest suite with kitchenette"],
  ["Patio", "Covered patio with outdoor kitchen"],
  ["Bedroom 2", "Second bedroom with walk-in closet"],
  ["Bedroom 3", "Third bedroom with mountain views"],
  ["Laundry", "Laundry and mudroom off the garage"],
  ["Garage", "Three car garage with epoxy floors"],
  ["Courtyard", "Entry courtyard with fountain"],
  ["Views", "Sunset views of Camelback Mountain"],
  ["Aerial", "Aerial view of the 0.62 acre lot"],
];

const images: GalleryImage[] = rooms.map(([label, alt]) => ({ label, alt }));

export default function Demo() {
  return (
    <div className="w-full max-w-[860px]">
      <ImageGalleryLightbox images={images} />
      <div className="mt-4 flex flex-wrap items-baseline justify-between gap-2">
        <div>
          <p className="font-display text-lg font-semibold tracking-tight text-foreground">6120 E Camelback Rd</p>
          <p className="text-sm text-muted-foreground">Scottsdale, AZ 85251 · 5 bd · 4.5 ba · 4,380 sqft</p>
        </div>
        <p className="font-display text-xl font-semibold tracking-tight tabular-nums text-foreground">$2,875,000</p>
      </div>
    </div>
  );
}

Installation

$npx shadcn@latest add @facade/image-gallery-lightbox

Pro items install from the private @facade registry with your license key. Set it up once.

Usage

import { ImageGalleryLightbox } from "@/components/facade/image-gallery-lightbox";

export default function Page() {
  return <ImageGalleryLightbox />;
}

Props

ImageGalleryLightboxProps is exported, so you can extend or wrap it. Every prop has a default; <ImageGalleryLightbox /> renders the example above.

Props of ImageGalleryLightbox
Prop	Type	Description
images	GalleryImage[]
totalCount	number	Override the total photo count shown in the "+N photos" overlay. Defaults to images.length.
className	string

Ask your agent

With the Facade MCP server connected, this prompt is enough:

Add the Facade image gallery lightbox to this page and adapt the copy to our business.