Comparison

PreviewCopy Anchor Link

UsageCopy Anchor Link

import {
  Comparison,
  ComparisonHandle,
  ComparisonItem,
} from '@vitnode/core/components/ui/comparison'

<Comparison aria-label="Before and after" className="aspect-video">
  <ComparisonItem position="left">
    <img alt="" draggable={false} src={before} />
  </ComparisonItem>
  <ComparisonItem position="right">
    <img alt="" draggable={false} src={after} />
  </ComparisonItem>
  <ComparisonHandle />
</Comparison>

position="left" is the image left of the handle, right the one on its right. Images fill their item with object-cover, so give Comparison a size or aspect ratio.

Tap somewhere new and the handle glides there, then follows your finger one to one. Keyboard steps glide too.

Hover modeCopy Anchor Link

With mode="hover" the handle follows the pointer, no click needed. Fun for quick looks; stick with dragging for anything precise.

Starting point and changesCopy Anchor Link

<Comparison defaultPosition={30} onPositionChange={setPosition}>
  ...
</Comparison>

position runs from 0 (all right image) to 100 (all left image).

Custom handleCopy Anchor Link

Pass children to ComparisonHandle to draw your own. It still moves with the slider.

<ComparisonHandle>
  <div className="bg-primary absolute inset-y-0 w-0.5" />
  <div className="bg-primary text-primary-foreground relative flex size-8 items-center justify-center rounded-full">
    <ChevronsLeftRightIcon className="size-4" />
  </div>
</ComparisonHandle>

AccessibilityCopy Anchor Link

• The comparison is a slider. Arrow keys move 5% (10% with Shift); Home and End jump to the ends.
• Screen readers hear the position as a percentage. Name it with aria-label.
• Images are decorative (alt=""). Describe the comparison in the label or a caption.
• Dragging sideways never blocks vertical page scrolling on phones.
• With reduced motion, the handle jumps instead of gliding.

PropsCopy Anchor Link