Comparison

A slider-based component for comparing two items in an overlay. It displays a draggable slider to reveal parts of each item. It responds to mouse and touch interactions. Use it to compare images or content side by side.

byShadcnblocks.com from Kibo UI

Installation

terminal

pnpm dlx layro-cli add @shadcnblocks/comparison

npx layro-cli add @shadcnblocks/comparison

npx layro-cli add @shadcnblocks/comparison

bunx layro-cli add @shadcnblocks/comparison

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

import { GripVerticalIcon } from "lucide-react";
import {
  type MotionValue,
  motion,
  useMotionValue,
  useSpring,
  useTransform,
} from "motion/react";
import {
  type ComponentProps,
  createContext,
  type HTMLAttributes,