Nexus UI

Slide to Confirm, animated React component

A swipe-to-confirm pill: drag the knob across with rubber-band resistance, and it snaps home early or locks in, waits on your async action and morphs into a success state.

  • Free
  • Inputs & Controls
  • Spring

Play with it

Move the controls and watch it change. Copy code gives you a snippet with only the props you changed.

Slide to confirm

Props

PropTypeDefaultWhat it does
labelstring"Slide to confirm"Text inside the track before confirming; also the accessible name.
successLabelstring"Confirmed"Text shown once confirmed.
pendingLabelstring"Confirming"Text shown while onConfirm is pending.
onConfirm() => void | Promise<unknown>—Runs when the knob reaches the end. Return a promise to show a pending spinner; a rejected promise shakes the knob and slides it back.
thresholdnumber0.9How far (0–1) the knob must travel before letting go confirms.
resetAfternumber2200Return to the start this many ms after success. 0 keeps the success state.
accentstring—Knob colour. Defaults to ink in light mode and white in dark mode.
successColorstring"#16a34a"Track colour once confirmed.
size"sm" | "md" | "lg""md"Track height, knob size and text size.
widthnumber—Track width in px. Defaults to 260 / 300 / 340 by size.
disabledbooleanfalseLocks the knob.
classNamestring—Extra classes on the track.

Add it to your project

  1. 1

    Prepare your project

    You need Tailwind CSS and the @/import alias. If shadcn isn't set up yet, initialise it once:

    npx shadcn@latest init

    Then add the Nexus registry to your components.json (the registries key is the part that matters):

    {
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "css": "src/app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "registries": {
    "@nexus-labs": "https://www.nexus-ui.com/api/registry/{name}"
  }
}
  2. 2

    Add the component

    Run this from your project root. It adds the component, the utilities it uses and its packages.

    npx shadcn@latest add @nexus-labs/slide-to-confirm
  3. 3

    Check what was added

    With the standard aliases, these files land in your project:

    components/
    slide-to-confirm/
    index.ts
    slide-to-confirm.tsx
  4. 4

    Copying by hand? Install the packages

    Skip this if you used the command above.

    npm install framer-motion lucide-react
  5. 5

    Use it in a page

    Import it and render it. The Code tab above has the full example.

    // app/page.tsx
import { SlideToConfirm } from "@/components/slide-to-confirm";

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

More inputs & controls