Slide to confirmPro

• Payments, transfers and launches on touch screens, where a deliberate gesture builds trust.

• Desktop-first forms: a button is faster.
• Anything that needs a review step: confirm first.

Import it from @/components/ui/slide-to-confirm after installing.

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

export function Pay({ amount }: { amount: string }) {
  return <SlideToConfirm label={`Slide to pay ${amount}`} doneLabel="Payment sent" onConfirm={submitPayment} />;
}

• The handle is a button that tells keyboard users to press Enter.
• The result is announced politely.

• The track text shimmers and fades as you drag; the fill follows the handle.
• Releasing short of 85% springs it back; reaching the end snaps it over and turns it green.

• Fills up to 384px; the drag range is measured, so any width works.

• Handle position is a motion value; layout is measured once per resize.

• Put the amount in the label so the gesture confirms something specific.