Before / After
A wipe slider for redesigns, retouching and restorations — with an old photo restored by default.
- Zero dependencies
- React + Tailwind
- Accessible
- Reduced-motion aware
Preview
Animated · Full motion: idle animation, physics and effects. animated (default)
Drag the seam, click anywhere, or use ← →. Takes any two React nodes. A first-visit wiggle hints that it's interactive.
Installation
$ npx shadcn@latest add https://guetix.com/r/before-after.json
Uses the shadcn CLI. It creates components/guetix/before-after.tsx and installs nothing else.
Usage
example.tsx
import { BeforeAfter } from "@/components/guetix/before-after";
export default function Example() {
return <BeforeAfter />;
}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| before / after | ReactNode | — | The two layers. |
| beforeLabel / afterLabel | string | — | Corner labels. |
| initial | number | 50 | Start position (0–100). |
| animated | boolean | true | false = the calm “Regular” version (no idle or ambient motion). |
Accessibility
- role=slider handle with arrow-key control.