Open Space Gallery

Galleries

About

Pin a reference, browse candidates independently, and shortlist images without losing reference context. A mobile-first TypeScript review gallery with independent controlled state, swipe and keyboard navigation, image retry, and an optional expanded review dialog. React only; uses the host’s shadcn theme.

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

Code

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

Usage.tsx

"use client";

// Original vector study set. SPDX-License-Identifier: MIT.
import { OpenSpaceGallery } from "@/components/ui/open-space-gallery";

const art = (sky: string, wall: string, floor: string, form: number) => `data:image/svg+xml,${encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="1000" viewBox="0 0 1600 1000"><path fill="${sky}" d="M0 0h1600v1000H0z"/><circle cx="1260" cy="220" r="90" fill="#fff6df"/><path fill="${floor}" d="M0 580h1600v420H0z"/><path fill="#172019" opacity=".15" d="m1030 580 470 420h-470Z"/>${form === 0 ? `<path fill="${wall}" fill-rule="evenodd" d="M570 860V340a230 230 0 0 1 460 0v520H570Zm90 0V340a140 140 0 0 1 280 0v520H660Z"/>` : form === 1 ? `<path fill="${wall}" d="M570 300h130v560H570zm330-140h130v700H900Z"/><path fill="#172019" opacity=".12" d="M570 300h130v560H570Z"/>` : `<circle cx="800" cy="430" r="230" fill="${wall}"/><path fill="${wall}" d="M620 680h360v180H620Z"/><path fill="#172019" opacity=".12" d="M620 680h360v60H620Z"/>`}</svg>`)}`;

const images = [
  { id: "arch", src: art("#e6d9bf", "#ba754e", "#c5a579", 0), title: "Warm arch", alt: "A terracotta arch casts a long shadow across sand.", caption: "Reference study · warm materials" },
  { id: "coast", src: art("#d0dfd6", "#e5cfa1", "#477b7a", 0), title: "Coastal opening", alt: "A pale stone arch stands beside a teal sea.", caption: "Candidate 01 · a cooler palette" },
  { id: "columns", src: art("#dedbd1", "#8f9b82", "#c2b694", 1), title: "Paired columns", alt: "Two sage stone columns rise from a sandy floor.", caption: "Candidate 02 · a different rhythm" },
  { id: "orb", src: art("#d9bac0", "#b75f59", "#b48f79", 2), title: "Soft monument", alt: "A coral sphere rests above a rectangular plinth.", caption: "Candidate 03 · a softer silhouette" },
  { id: "night", src: art("#526680", "#adb9be", "#2b4c57", 0), title: "Blue hour", alt: "A silver arch and pale moon above a dark blue landscape.", caption: "Candidate 04 · the evening study" },
];
const settings = { showThumbnails: true, enableLightbox: true, loop: true };

export default function Demo(props: Partial<typeof settings>) {
  // Leave room for the registry preview's floating toolbar.
  return <div className="w-full pt-14"><OpenSpaceGallery images={images} defaultReferenceId="arch" defaultActiveId="coast" {...settings} {...props}/></div>;
}