Modus UI

Swipe Confirm

Web (React)

A drag-to-confirm track for actions that should not happen by accident.

The track sits on muted paper with a hairline border and mono caps. Return a promise from onConfirm to show a pending state, then a signed or failed state.

Slide to sign
Modus / Swipe Confirm

Installation

CLI

npx @modus-ui/cli add swipe-confirm

Manual

  1. Copy the code from the component tab.
  2. Create a file at components/ui/swipe-confirm.tsx.
  3. Paste the code.

Usage

tsx
import { SwipeConfirm } from "@/components/ui/swipe-confirm";

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

Props

PropTypeDefaultDescription
labelstring"Slide to sign"-
doneLabelstring"Signed"-
errorLabelstring"Could not sign"-
onConfirmany--
onDoneany--
onErrorany--
trackColorstring"hsl(var(--muted))"-
handleColorstring"hsl(var(--primary))"-
successColorstring"hsl(var(--accent-foreground))"-
dangerColorstring"hsl(var(--destructive))"-
widthnumber280-
heightnumber56-
radiusnumber10-
speednumber50-
returnBouncenumber0.38-
landingDipnumber0.026-
holdMsnumber1500-
disabledbooleanfalse-
iconany--

Comments

  • No comments yet.