Comparator

Basic

After

Before

Features

Any Element Support

Compare images, text, code blocks, or any React component.

Hover Interaction

Optional hover mode for desktop-friendly comparison.

Spring Physics

Smooth, natural motion with configurable spring settings.

Custom Slider

Fully customizable handle and separator line.

Installation

Works with npm, pnpm, yarn, and bun

$npx libravelui@latest add comparator

Anatomy


import { Comparator, ComparatorPane, ComparatorSlider } from "@/components/ui/motion/comparator";

<Comparator>
<ComparatorPane position="left">
  <BeforeComponent />
</ComparatorPane>
<ComparatorPane position="right">
  <AfterComponent />
</ComparatorPane>
<ComparatorSlider />
</Comparator>

import { Comparator, ComparatorPane, ComparatorSlider } from "@/components/ui/motion/comparator";<Comparator><ComparatorPane position="left">  <BeforeComponent /></ComparatorPane><ComparatorPane position="right">  <AfterComponent /></ComparatorPane><ComparatorSlider /></Comparator>

Testing Playground

Non-Image Content

function fetchData() {
  fetch('/api/data')
    .then(res => res.json())
    .then(setData)
    .catch(console.error);
}

async function fetchData() {
  try {
    const res = await fetch('/api/data');
    const data = await res.json();
    setData(data);
  } catch (err) {
    console.error(err);
  }
}

diff

Hover Mode

Custom Slider

Props

Loading types…

Starter kits

Core

Buttons & Actions

Collections

Colors

Date & Time

Drag & Drop

Feedback & Status

Form & Inputs

Keyboard & Accessibility

Layout & Content

Media

Menus & Commands

Navigation

Overlays

Visual Effects

Motion

Text

Elements

Quick start (CLI)

Manual installation