# Image compare (goodtabs UI)

A before and after slider built on a real range input, with full keyboard support.

## Install

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

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

## Usage

```tsx
import { ImageCompare } from "@/components/ui/image-compare"

<ImageCompare beforeSrc="/old.png" afterSrc="/new.png" beforeAlt="The old header" afterAlt="The new header" />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| beforeSrc | `string` |  | Image on the left of the divider. |
| afterSrc | `string` |  | Image on the right of the divider. |
| beforeAlt | `string` |  | Alt text of the before image. |
| afterAlt | `string` |  | Alt text of the after image. |
| beforeLabel | `string` |  | Small label over the before side. |
| afterLabel | `string` |  | Small label over the after side. |
| defaultPosition | `number` | `50` | Starting position, 0 to 100. |
| aspect | `string` | `"3 / 2"` | Aspect ratio of the frame. |
| label | `string` | `"Compare before and after"` | Accessible name of the range input. |

## When to use

- Showing a redesign, an edit or a render change on one spot
- Two images of the same size and framing

## When not to use

- Images with different framing; the split will not line up
- More than two states, where tabs or a gallery work better

## Notes for agents

- Client component; the control is a transparent range input over the images, so keys, touch and pointer are native
- Arrow keys move 1 percent, Home and End jump to the edges, and aria-valuetext reads the split aloud
- Both images use object-cover in the same frame, so give them the same aspect ratio
- The reveal uses clip-path on the before image; nothing animates, so reduced motion needs no handling

## The maths

- The before image is clipped with inset(0 (100 - p)% 0 0), so at p = 30 it shows the left 30 percent.
- The divider sits at left = p%, and the range input maps its 0 to 100 value to that same p.

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