# Gallery section (goodtabs UI)

A captioned image grid where every image shares one aspect ratio.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/gallery-section.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/gallery-section`

## Usage

```tsx
import { GallerySection } from "@/components/gallery-section"

<GallerySection items={[{ src: "/work/one.jpg", alt: "A dashboard in dark mode", caption: "Dashboard", meta: "2026" }]} />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| items | `{ src; alt; caption; meta? }[]` |  | The images. alt is required because the image carries meaning. |
| columns | `2 | 3` | `3` | Maximum columns. Two columns on narrow containers. |

## When to use

- Showing work, screenshots or a set of renders
- A portfolio or case study page
- Captioned images that should line up in rows

## When not to use

- Full screen browsing, which wants a lightbox or carousel
- Post teasers with text, which want blog cards
- A single hero image

## Notes for agents

- Server component; uses figure and figcaption so captions are tied to images
- Layout follows container width with @container
- Every image is cropped to aspect-3/2, crop in the source if you need a different focal point

Docs: https://ui.goodtabs.co/components/gallery-section