ComponentsSite blocks

Gallery section

Venue, food and project photos. A server-rendered grid — mosaic with author-chosen spans, a scroll-snapped filmstrip, equal cells, or a sticky caption beside an image stream — with the Media group's Lightbox as an island: thumbnails are buttons (“Open image 3 of 12”), the viewer traps focus, closes on Esc and navigates with arrows. Alt text is required.

Lightbox (Media group) blocks/site/gallery-section.tsx, blocks/site/shared/gallery-lightbox.tsx, media/lightbox.tsx, blocks/site/registry-2.ts, styles/blocks.csstheme · material · accent · density · font

Gallery

The room, the terrace, the grill

Installation

$ pnpm add @vamos-ui/react

The whole kit as one package — get updates by bumping the version. Add the styles to globals.css: @import "@vamos-ui/react/styles.css";

Usage

import { GallerySection } from "@vamos-ui/react/blocks";

<GallerySection
  title="The *room*"
  images={[
    { image: { src: "/img/dining-room.jpg", alt: "The dining room at dusk", width: 2000, height: 1333 }, span: "big" },
    { image: { src: "/img/bar.jpg", alt: "The rakı shelf", width: 1200, height: 1500 }, span: "tall" },
  ]}
/>

Examples

Filmstrip (spa)

One scroll-snapped row of equal heights, running off the end edge; the track is keyboard-scrollable.

A day at Hamam Moda

5 photos

Grid + lightbox

Equal cells at a fixed ratio (aspect) with small captions.

On the menu this week

  • Cold meze
  • Grilled levrek
  • Bonito, charcoal
  • Sourdough pide
  • The full table
  • Rakı service

Split caption (case study)

Sticky title on the start side, images with long numbered captions on the end side; lightbox off.

Case study

Defne Clinic, three branches

A booking site for a dermatology clinic: one calendar per doctor, deposits through iyzico, Turkish and English.

  1. A bright clinic reception with oak benches
    Reception at Nişantaşı. Photography was shot in natural light so the site never needed retouched stock.
  2. A site layout open on a laptop beside sketches
    Booking flow: treatment, doctor, time, deposit — four steps, no account required.
  3. Fresh peonies on the reception desk
    Brand details carried into the confirmation emails and WhatsApp templates.

API

GallerySection

PropTypeDefault
variant
A mosaic with fewer than 5 images becomes grid.
"mosaic" | "filmstrip" | "grid" | "split-caption""mosaic"
images
3–40 images; span: 1 · wide · tall · big (mosaic).
{ image: { src; alt; width; height; focal? }; caption?; span? }[]—
lightbox
Open images in the full-screen viewer.
booleantrue
aspect
Cell ratio for grid.
"mixed" | "3:2" | "1:1" | "4:5""3:2"
eyebrow / title / lead
Section header.
ReactNode—
labels / locale
Open image {index} of {total}, {count} photos.
Partial<Site2Labels> / string—
theme / anchor / id / className / headingLevel / components / editMode
Shared block props.
BlockBaseProps—
Previous
Funnel
Next
Gallery grid