Before / After
NewFree
A before and after comparison with a divider you drag, tap or move with the arrow keys, side by side or stacked.
Customize
Orientation
50%
Follow the mouse
Corner tags
#ff784f
When to use it
- Art passes on a devlog, from blockout to final render
- Photo edits, renovations or restoration work on a portfolio page
- Redesign case studies that show the old and the new interface
Good to know
- Plan
- Free, MIT license
- Dependencies
- None beyond React
- Rendering
- DOM and CSS
- Reduced motion
- Respected
- Lines of code
- 338
Installation
npx shadcn@latest add https://ui.mekaigames.com/r/before-after.jsonWorks in any project set up with the shadcn CLI.
- Copy the code from the Code tab into
components/ui/before-after.tsx.
Free under the MIT license. If it saved you time, star the repo on GitHub: it helps other developers find it.
Usage
import { BeforeAfter } from "@/components/ui/before-after";
<BeforeAfter
before={{ src: "/shots/blockout.jpg", alt: "Level blockout", label: "Blockout" }}
after={{ src: "/shots/final.jpg", alt: "The finished level", label: "Final" }}
/>Props
14 properties| Property | Type | Default | Description |
|---|---|---|---|
| before | { src?, alt?, content?, label? } | — | The left or top side. Pass content for any markup, or src and alt for an image. |
| after | { src?, alt?, content?, label? } | — | The right or bottom side. |
| orientation | "horizontal" | "vertical" | "horizontal" | Horizontal puts before on the left, vertical puts it on top. |
| value | number | — | Controlled divider position, 0 to 100. |
| defaultValue | number | 50 | Starting position when uncontrolled. |
| onValueChange | (value: number) => void | — | Called as the divider moves. |
| aspectRatio | string | "16 / 10" | CSS aspect ratio of the frame. |
| step | number | 4 | Percent moved by one arrow key press. Page Up and Page Down move four times that. |
| followPointer | boolean | false | The divider follows a mouse without pressing. Touch still drags. |
| hint | boolean | false | Nudges the divider once when it first scrolls into view. Off with reduced motion. |
| showLabels | boolean | true | Corner tags. They fade out when the divider reaches them. |
| color | string | "#ff784f" | Color of the divider and its grip. |
| label | string | "Compare before and after" | Accessible name of the slider. |
| className | string | — | Extra classes for the frame. |