# Screenshot stack (goodtabs UI)

Two or three screenshots overlapping in a static composition.

## Install

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

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

## Usage

```tsx
import { ScreenshotStack } from "@/components/ui/screenshot-stack"

<ScreenshotStack shots={[
  { src: "/a.jpg", alt: "Dashboard" },
  { src: "/b.jpg", alt: "Settings" },
]} />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| shots | `[Shot, Shot] | [Shot, Shot, Shot]` |  | Two or three { src, alt } items, back to front. The last is on top. |
| maxWidth | `string` |  | Constrain the stack, for example "420px". |

## When to use

- Showing several screens of a product in one hero image
- Beside a headline where one screenshot feels thin

## When not to use

- Screenshots people need to read; the layers hide part of each
- More than three images, which want a grid

## Notes for agents

- Server component with no motion; positions are percentages, so it scales with its width
- Each layer is 68% wide, offset 12% right and 10% down from the one behind
- The stack has a 4 by 3 box and layers keep a 3 by 2 ratio

Docs: https://ui.goodtabs.co/components/screenshot-stack