MiniDev UI

Before After Wipe

Motion

A before and after comparison slider in React: drag the handle or use the labelled range input to wipe between two layouts across the full width.

src/registry/premium/before-after-wipe.tsx/r/before-after-wipe.json

Generic dashboard

Redesigned

Wipe

Installation#

bash
npx shadcn@latest add @minidev/before-after-wipe

MiniDev UI is in the shadcn registry directory, so the short form works with no setup. Older CLI versions can use the full URL: npx shadcn@latest add https://ui.minidev.pro/r/before-after-wipe.json

Usage#

tsx
import { BeforeAfterWipe } from "@/components/ui/before-after-wipe"

export function Example() {
  return (
    <BeforeAfterWipe />
  )
}

API reference#

BeforeAfterWipe props
PropTypeDefault
beforeLabelstring"Generic dashboard"
afterLabelstring"Redesigned"
classNamestring-

Examples#

MotionKinetic type, sticky story, magnetic CTA

Related media components#

Filmstrip ScrubA filmstrip scrubber with a preview area, a row of selectable frame buttons using aria-pressed, and a range slider to scrub through frames quickly.Audio PlayerMinimal React audio player row with a play and pause toggle, title, subtitle and an accessible progress bar. Controlled, so it works with any audio source.AvatarShadcn compatible avatar on Base UI with image and initials fallback, three sizes, a status badge and an overlapping avatar group with a plus count.CarouselScroll snap React carousel with previous and next buttons, arrow key support and a labelled region. Shows one, two or three slides by breakpoint, no library.File ListA stacked list of file rows showing each name and metadata such as size or date, with an optional download button per item. Good for React attachment lists.File RowA single file row with an icon, a truncated name, an optional meta line and a ghost download button with an accessible label. Styled with Tailwind.
All media and upload components