Slide to Confirm

The 'slide to unlock' gesture for destructive actions, with a shimmering label and spring-back.

Zero dependencies
React + Tailwind
Accessible
Reduced-motion aware

Animated · Full motion: idle animation, physics and effects. animated (default)

Drag the handle all the way to confirm. Releasing early springs back with overshoot; the label shimmers and fades as you slide; completion turns the track red with a check, with Undo.

Installation

$ npx shadcn@latest add https://guetix.com/r/slide-to-confirm.json

Uses the shadcn CLI. It creates components/guetix/slide-to-confirm.tsx and installs nothing else.

Usage

example.tsx

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

export default function Example() {
  return <SlideToConfirm />;
}

Delete projectTransfer moneyPublish to production

Props

Prop	Type	Default	Description
label	string	—	Track label.
doneLabel	string	—	Completed label.
onConfirm	() => void	—	Fired on completion.
color	string	"#ef4444"	Completed color.
animated	boolean	true	false = the calm “Regular” version (no idle or ambient motion).

Accessibility

Handle is role=slider; → / End / Enter confirm from the keyboard.

Slide to Confirm

Preview

Slide to Confirm

Preview