Skip to content
Pinky UI

media

Before / After

An aligned media comparison driven by a native range.

  • media
  • comparison
  • drag
  • range

Live preview

Before
After

Quick usage

usage
import { BeforeAfter } from "@pinky-ui/systems";

<BeforeAfter before={before} after={after} />

Presets

Default

Restrained production behaviour.

Default behaviour

Quiet

Reduced intensity for dense product screens.

disabled={true}

Install

Add @pinky-ui/systems as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/systems

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Props

PropTypeDefaultDescription
valuenumber50Controlled reveal percentage.
classNamestring—Styles the outer interaction surface.

Accessibility

  • Keyboard and touch paths match the pointer interaction.
  • Stable labels and values remain available without motion.

Performance

  • One clipped overlay; no canvas or pointer-frame React loop.

Reduced motion

Motion resolves immediately while semantics, focus and state remain unchanged.

When to use

  • Redesign, editing and restoration comparisons

When not to use

  • Unaligned or misleading images

Skill

Purpose

BeforeAfter compares two aligned visual states with one native range control. Use it for redesigns, editing, restoration and honest product comparisons.

Both layers need labels and equivalent dimensions. Avoid misleading crops, unrelated imagery or using the slider when side-by-side comparison is clearer. The position must respond to arrows, touch and a controlled value without requiring drag precision.

Keep tactile feedback small and preserve the native range semantics. Reduced motion removes thumb flourish, not control behaviour. Compose with captions that explain what changed; never let color alone carry the comparison.

Open this skill on its own page