Browse components
Slide Commit
Slide-to-confirm track: the knob stretches as you fling it, commits past the threshold with a popping check, and springs home with a wobble if you let go early.
Installation
npx shadcn@latest add @glint-ui/slide-commitFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/slide-commit.json
Usage
import { SlideCommit } from "@/components/ui/slide-commit";
<SlideCommit label="Slide to pay" confirmedLabel="Paid" onCommit={() => pay(invoice.id)} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | "Slide to confirm" | Track label. |
| confirmedLabel | string | "Confirmed" | Label after committing. |
| color | string | "#22c55e" | Fill color. |
| threshold | number | 0.9 | Fraction of the track to pass to commit on release. |
| resetAfter | number | 2500 | Ms before resetting after commit; 0 stays committed. |
| onCommit | ReactNode | — | Called once the knob reaches the end. |
| className | string | — | Extra classes for the root element. |