Slide to confirm

When to use #

Use it for

Paying, sending to everyone, going live.
Phone screens where a stray tap is costly.

Skip it when

Everyday actions; a button is faster.
Destructive actions that need an undo instead.

Installation #

terminal

pnpm dlx shadcn@latest add https://caliperui.site/r/slide-to-confirm.json

Adds its 2 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above.

example.tsx

import { useState } from "react"
import { SlideToConfirm } from "@/components/ui/slide-to-confirm"

const wait = (ms: number) => new Promise<void>((resolve) => setTimeout(resolve, ms));

export function SlideToConfirmDemo() {
  const [round, setRound] = useState(0);
  return (
    <div className="grid w-full max-w-sm gap-3">
      <SlideToConfirm key={round} label="Slide to pay €1,240" confirmingLabel="Paying…" doneLabel="Paid €1,240" onConfirm={() => wait(1200)} />
      <button type="button" className="w-fit text-sm text-muted-foreground underline underline-offset-4" onClick={() => setRound((n) => n + 1)}>Start again</button>
    </div>
  );
}

API reference #

SlideToConfirm

component

PropTypeDefaultDescription

label *string—What sliding does, e.g. "Slide to pay €120".

confirmingLabelstring"Working…"

doneLabelstring"Done"

onConfirm *() => void | Promise<void>—Called once at the end; may return a promise. A thrown error resets the slider.

disabledbooleanfalse

classNamestring—

It exposes slider and status semantics, with aria-disabled, aria-hidden, aria-label, aria-valuemin, aria-valuemax and aria-valuenow kept in step with state. Changes that matter are announced through a live region.

KeyBehaviour

→Moves to the next item or value.

↑Moves to the previous item or value.

←Moves to the previous item or value.

↓Moves to the next item or value.

EndJumps to the last item or the maximum.

HomeJumps to the first item or the minimum.

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.