Yami

Search documentation

Search components and pages

Compare

A drag slider that reveals before and after states side by side.

Before
YU
After

Installation

Add the compare component with the shadcn CLI.

npx shadcn@latest add https://yami.ui.unsanity.ai/r/compare.json

Usage

import { Compare, CompareBefore, CompareAfter, CompareHandle, CompareLabel } from "@/components/ui/compare"

<Compare defaultPosition={40} className="h-48 w-72 rounded-xl border">
  <CompareBefore>
    {/* before content */}
    <CompareLabel className="bottom-3 left-3">Before</CompareLabel>
  </CompareBefore>
  <CompareAfter>
    {/* after content */}
    <CompareLabel className="bottom-3 right-3">After</CompareLabel>
  </CompareAfter>
  <CompareHandle />
</Compare>

Examples

Default

Drag the handle to reveal before / after
Before
YU
After

Code

import { Compare, CompareBefore, CompareAfter, CompareHandle, CompareLabel } from "@/components/ui/compare"

<Compare defaultPosition={40} className="h-48 w-72 rounded-xl border">
  <CompareBefore className="flex items-center justify-center bg-muted">
    {/* skeleton / wireframe state */}
    <CompareLabel className="bottom-3 left-3">Before</CompareLabel>
  </CompareBefore>
  <CompareAfter className="flex items-center justify-center bg-background">
    {/* final / generated state */}
    <CompareLabel className="bottom-3 right-3">After</CompareLabel>
  </CompareAfter>
  <CompareHandle />
</Compare>

Image comparison

Compare two images with CSS gradients
Grayscale
Color

Code

import { Compare, CompareBefore, CompareAfter, CompareHandle, CompareLabel } from "@/components/ui/compare"

<Compare defaultPosition={50} className="h-48 w-72 rounded-xl border">
  <CompareBefore>
    <img src="/before.jpg" className="absolute inset-0 size-full object-cover" alt="Before" />
    <CompareLabel className="bottom-3 left-3">Before</CompareLabel>
  </CompareBefore>
  <CompareAfter>
    <img src="/after.jpg" className="absolute inset-0 size-full object-cover" alt="After" />
    <CompareLabel className="bottom-3 right-3">After</CompareLabel>
  </CompareAfter>
  <CompareHandle />
</Compare>