# Dock gallery

A shadcn/ui gallery section for product and lifestyle brands: photos drift on a rail, swell like a dock under the pointer and open large on click.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available for the docs, pricing and about pages: append `.md` to the URL or send an `Accept: text/markdown` header (the home page answers the header too). An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).

## At a glance

- **Good for:** Furniture, product and lifestyle brand websites; Campaign and lookbook pages; Studio and portfolio home pages
- **Category:** Marketing · **Type:** Features, Gallery · **Style:** Motion, Minimal, Dark mode
- **See it:** [Live preview](https://www.craftui.space/docs/templates/gallery-section) · [Video](https://pub-52b0d9cec7c64f638ba3f33a29718fa6.r2.dev/Videos_product_cards/features-dock-gallery.e3a26caa.mp4)

## Install

```bash
pnpm dlx shadcn@latest add https://www.craftui.space/r/gallery-section.json
```

This is a paid item (SEC-0014): the install needs a craftUI plan or a purchase of it. Signed in, the docs page gives your personal install command. Plans: https://www.craftui.space/pricing

## Usage

```tsx
import GallerySection from "@/components/blocks/gallery-section";

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

With no props it renders with demo content; pass your own through the props below.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `heading` | `ReactNode` | `"Furniture for how people sit, lean and gather."` | The headline above the rail. Defaults to "Furniture for how people sit, lean and gather." |
| `items` | `GallerySectionItem[]` | `built-in demo content` | The photos on the rail, in order. It loops, so six or more read best. Defaults to `galleryItems`. |
| `speed` | `number` | `28` | Pixels a second the rail drifts while nothing is hovered or open. `0` holds it still. Defaults to 28. |
| `viewLabel` | `string` | `"View"` | The word in the cursor disc over a closed tile. Defaults to "View". |
| `closeLabel` | `string` | `"Close"` | The word in the cursor disc while a tile is open. Defaults to "Close". |
| `headingLevel` | `1 \| 2 \| 3` | `2` | The headline's level: 1 when this is the page's main heading, 2 or 3 to fit under the page's own. Defaults to 2. |

It also accepts every `<section>` attribute (`className`, `id`, `aria-*` and so on).

### `GallerySectionItem`

| Field | Type | Description |
| --- | --- | --- |
| `id` (required) | `string` | Unique id: the rail keys on it. |
| `image` (required) | `string` | URL of the photo, shown at about 4:5. Use one about 1000px wide: an open tile scales it up nearly 3×. |
| `alt` (required) | `string` | What the photo shows, for screen readers. |

## Files

The install adds:

- `components/blocks/gallery-section.tsx`

No npm dependencies beyond React and Tailwind CSS.