Confirm by sliding the knob all the way across, for payments and deletions. Tapping the knob or the arrow keys work too.
Customize
Usage
import { SlideToConfirm } from "@/components/motionkit/slide-to-confirm";
<SlideToConfirm
label="Slide to pay £48"
onConfirm={async () => {
await fetch("/api/pay", { method: "POST" });
}}
/>Motion
The exact curves this component runs, plotted with Motion's own maths.
Knob return or finish
Release, tap or arrow key
Hint sweep
Runs while idle
Payments, transfers, deleting data and other actions that shouldn't happen from a stray tap, especially on mobile.
The knob is a Motion drag handle constrained to the track, and a trail and fading label follow its position through motion values. Releasing past 90% confirms; anything less springs back. Your onConfirm can return a promise, and the knob shows a spinner until it settles, then a drawn tick. For people who can't or don't want to drag, tapping the knob moves it a quarter of the way and the arrow keys do the same, sliding back if left unfinished.
| Prop | Type | Default | Description |
|---|---|---|---|
| onConfirm | () => void | Promise<void> | — | Runs at the end; a promise shows a spinner until it settles. |
| label | string | "Slide to confirm" | Text on the track, and the slider's name. |
| confirmedLabel | string | "Confirmed" | Shown and announced once done. |
| accent | string | "#0E7C86" | Knob and trail colour. |
| resetAfter | number | 0 | Seconds before returning to the start; 0 stays confirmed. |
How we audit: the WCAG 2.2 animation checklist and respecting reduced motion in React.
Yes. The file starts with "use client", so you can import it straight into a Server Component page or layout. It works in Vite as is, and in Astro as a React island.
Only the motion package, beside React and Tailwind CSS v4. There is no MotionKit package and no Tailwind config to add.
Yes, with MotionKit Plus. Add the @motionkit registry and your personal token to components.json (the snippet is on your account page), then run npx shadcn@latest add @motionkit/slide-to-confirm. It saves the file to components/motionkit and installs its dependencies.
Slide to Confirm is part of MotionKit Plus (£12 / $15 / €14 a month or £96 / $120 / €112 a year). The live preview and playground are free to explore; Plus unlocks its source code, every customisation control and commercial use.
With reduced motion on, the knob moves without springing and the hint doesn't shimmer. Tapping the knob moves it a quarter of the way, so it never requires dragging (WCAG 2.5.7).
Yes. Tapping the knob moves it a quarter of the way at a time, and as a slider it responds to the arrow keys and End. That meets WCAG 2.5.7, which requires an alternative to dragging.
Customize
Usage
import { SlideToConfirm } from "@/components/motionkit/slide-to-confirm";
<SlideToConfirm
label="Slide to pay £48"
onConfirm={async () => {
await fetch("/api/pay", { method: "POST" });
}}
/>Motion
The exact curves this component runs, plotted with Motion's own maths.
Knob return or finish
Release, tap or arrow key
Hint sweep
Runs while idle
The live preview is free to explore. Plus unlocks the source for Slide to Confirm and every other premium component.