Slide to confirm

Drag the knob to the end, or focus it and use the arrow keys

Controls

label

completeLabel

threshold

widthpx

accentColor

resetAfterms

disabled

Slide Button

Slide-to-confirm track with a draggable knob, shimmering label and keyboard support.

Open in v0

$ pnpm dlx shadcn@latest add @tweenly/slide-button

import { SlideButton } from "@/components/slide-button"

export function Demo() {
  return (
    <SlideButton accentColor="#ff6a2b" onComplete={() => placeOrder()} />
  )
}

Updates live as you change the controls. Only non-default props are included.