Comparison
DisplayMITBefore / after image slider with horizontal or vertical orientation and full keyboard support.
bun add @otfdashkit/ui
Preview
ComparisonDisplay
Loading Storybook preview…
Code
@otfdashkit/uiimport { Comparison } from '@otfdashkit/ui'
const BEFORE =
'https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=1200&h=800&fit=crop&q=80'
const AFTER =
'https://images.unsplash.com/photo-1500964757637-c85e8a162699?w=1200&h=800&fit=crop&q=80'
export function Example() {
return (
<div className="aspect-[3/2] max-w-2xl">
<Comparison
before={BEFORE}
after={AFTER}
beforeAlt="Mountain landscape with summer green"
afterAlt="Mountain landscape with autumn snow"
/>
</div>
)
}
Free with the SDK. This component ships in @otfdashkit/ui under the MIT license.
Props
Props declared in the Comparison source. Inherited HTML attributes are not listed.
| Prop | Type | Default | Description |
|---|---|---|---|
| afterrequired | string | Image URL shown on the RIGHT (or BOTTOM). | |
| beforerequired | string | Image URL shown on the LEFT (or TOP for vertical). | |
| afterAlt | string | 'After' | |
| afterLabel | string | ||
| beforeAlt | string | 'Before' | |
| beforeLabel | string | Optional captions rendered as small badges in the corners. | |
| defaultValue | number | (readonly string[] & number) | 50 | Initial split position 0..100. Default 50. |
| onValueChange | (value: number) => void | ||
| orientation | 'horizontal' | 'vertical' | 'horizontal' | Slider orientation. Default 'horizontal'. |
| value | number | Controlled split position. |