Slide to Confirm

Slide-to-unlock control for risky actions

A deliberate alternative to a confirm dialog: drag the knob to the end to fire the action, release early and it springs back. The prompt carries a slow shimmer and fades as you drag.

Preview

Deploy website

main · 8f4ac2d

Ready

Slide to deploy

Drag, or use Enter and arrow keys.

Installation

Install the component using the CLI.

npx shadcn@latest add https://rohan.run/r/slide-to-confirm.json

Usage

Import the component:

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

Use it in your code:

<SlideToConfirm
  label="Slide to deploy"
  confirmedLabel="Deployed"
  onConfirm={() => deploy()}
/>

Props

Property	Type	Default	Description
label	string	"Slide to confirm"	Prompt shown in the track.
confirmedLabel	string	"Confirmed"	Label shown after confirming.
onConfirm	() => void	—	Fired once the knob reaches the end of the track.
resetAfter	number	0	Auto-reset delay in ms. 0 keeps it confirmed.
className	string	—	Optional CSS classes for the track.

Components