Slide to Confirm
Users drag an interactive handle across the track to confirm an action, with spring physics snapping the handle back if released before completion and smooth label fade-out during dragging.
Preview
Slide to delete
This component is in beta and is not keyboard accessible yet.
Installation
npx shadcn@latest add "https://flow-kit-beta.vercel.app/r/slide-to-confirm.json"API Reference
SlideToConfirm
| Prop | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Required | Content or label displayed inside the track, which smoothly fades out as the handle slides across. |
| onConfirm | () => void | Required | Callback function triggered when the handle is successfully dragged to the end of the track. |
| className | string | undefined | Additional CSS classes for the root container. |
| handle | React.ReactNode | undefined | Custom handle element. If omitted, defaults to a circular chevron icon. |