A press-and-slide control for destructive actions. The track turns from neutral to danger as the handle moves and locks with a pop when it reaches the end. Hold Enter does the same from the keyboard.
northwind-docs
214 files, 3 live deploys
npx shadcn@latest add https://hyperblur.dev/r/micro-slide-commit.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/micro-slide-commit.tsx.
import { SlideCommit } from "@/components/hyperblur/micro-slide-commit"
<SlideCommit label="Slide to delete" onCommit={() => deleteProject()} />| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | "Slide to delete" | Text on the track before committing. |
| committedLabel | string | "Deleted" | Text shown once the action is committed. |
| onCommit | () => void | Called once when the handle is released past the threshold or Enter is held long enough. | |
| accent | string | "#ff4d5e" | Danger color the track fills with. |
| threshold | number | 0.92 | Fraction of the track the handle must reach before release to commit. |
| holdDuration | number | 1200 | Milliseconds Enter must be held to commit from the keyboard. |
| resetAfter | number | 2200 | Milliseconds before the control returns to its start. Use 0 to stay committed. |
| disabled | boolean | false | Disables dragging and the keyboard hold. |