Slide commit

Slide to confirm: drag the handle past the line and it commits with a spinner and a green check; let go early and it springs home.

Buttons, drag, Motion

Install

npm i clsx motion tailwind-merge && curl -o components/slide-commit.tsx https://motion-brew.com/r/slide-commit.tsx

One self contained file for React and Tailwind CSS: slide-commit.tsx. Or ask your AI agent to add it through the MCP server.

Usage

import { SlideCommit } from "@/components/slide-commit";

export default function Page() {
  return (
    <SlideCommit
      label="Slide to pay $48"
      doneLabel="Paid"
      onCommit={() => pay()}
    />
  );
}

Props

Prop	Type	Default	Description
label	string	"Slide to commit"	Label in the track
pendingLabel	string	\"Committing\"	Label while the action runs
doneLabel	string	"Committed"	Label once committed
threshold	number	0.82	Share of the track the handle must pass, 0.5 to 0.95
onCommit	() => void \	Promise		Called on commit; a promise holds the spinner, a rejection springs back
resetAfter	number	2.4	Seconds before it resets on its own; 0 waits for a press
className	string		Size and shape of the track

More buttons

Download button: A download pill whose page icon fills up like liquid as the percentage counts, while a waving fill sweeps across, then a check lands on the page.
Receipt button: A pay button that turns into a receipt printer: progress fill, check draw, line-by-line paper feed and a torn-off receipt.
Fuse button: An action button whose done state carries an undo on a burning fuse.
Magnetic button: A button that leans toward your cursor on a spring.

All animated react button components