Components
Loading preview...
Slider that activates an action only when fully dragged to the end — replaces destructive or high-stakes confirm buttons with an intentional swipe gesture.
@reapollo
npx shadcn@latest add https://21st.dev/r/larsen66/drag-to-confirm-slider"use client";
import { DragToConfirmSlider } from "@/components/ui/drag-to-confirm-slider";
export default function DragToConfirmSliderDemo() {
return (
<div className="flex min-h-screen w-full items-center justify-center bg-background p-8">
<div className="w-full max-w-xs">
<DragToConfirmSlider
label="Drag to confirm"
confirmText="Confirmed!"
onConfirm={() => console.log("confirmed")}
/>
</div>
</div>
);
}
export { DragToConfirmSliderDemo };