# Image zoom (goodtabs UI)

Click an image to see it large. Keyboard reachable, Escape closes.

## Install

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

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

## Usage

```tsx
import { ImageZoom } from "@/components/ui/image-zoom"

<ImageZoom src="/shot.jpg" alt="The settings page" maxWidth="320px" />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| src | `string` |  | Image URL, used for the thumbnail and the large view. |
| alt | `string` |  | Describes the image for people who cannot see it. |
| maxWidth | `string` |  | Constrain the thumbnail, for example "320px". |

## When to use

- Screenshots whose detail is lost at thumbnail size
- Article images that deserve a closer look

## When not to use

- A gallery with next and previous, which needs a carousel
- Images that are already shown full width

## Notes for agents

- Client component built on the Radix dialog, so focus is trapped and restored
- The trigger is a button with an accessible name; Escape or a click closes
- The 150ms fade is removed under reduced motion
- Uses the same src for the thumbnail and the large view

Docs: https://ui.goodtabs.co/components/image-zoom