Comparison
Reveals the difference between two layers with a draggable divider
Category: display · WCAG 2.2-AA · comparison, before-after, image, slider, display
States
- default
Props
| Prop | Type | Default | Description |
|---|---|---|---|
after | ReactNode | — | Base layer shown underneath |
before | ReactNode | — | Top layer revealed up to the divider |
position | number | — | Divider position 0–100 (controlled) |
defaultPosition | number | 50 | The initial divider position (0–100) when uncontrolled. |
onPositionChange | (position: number) => void | — | Called with the new divider position when it changes. |
orientation | 'horizontal' | 'vertical' | horizontal | Layout orientation of the component. |
keyboardStep | number | 5 | How far the divider moves per arrow-key press. |
label | string | — | Text label for the control. |
Design tokens
--cascivo-radius-md--cascivo-radius-full--cascivo-color-surface--cascivo-color-border--cascivo-color-focus-ring--cascivo-shadow-sm--cascivo-target-min-coarse
When to use
- Showing the difference between two versions of similar content (before/after edits, original vs processed)
- Letting users interactively reveal one image or panel over another
- Side-by-side visual demos where a draggable divider is clearer than two static images
When not to use
- Comparing more than two items — use a layout or table instead
- Non-visual data comparison — use a table or chart
- Static side-by-side images with no need for an interactive reveal
How to build an accessible Comparison in React →
Examples
Image before/after
<Comparison before={<img src="/edited.jpg" alt="" />} after={<img src="/original.jpg" alt="Original" />} label="Reveal edited image" />Vertical
<Comparison orientation="vertical" before={<Before />} after={<After />} />Controlled
<Comparison position={position} onPositionChange={setPosition} before={<Before />} after={<After />} />