127 Components
Kinetic Swipe Button
ButtonsSlide-to-execute actuator switch with a spring-tethered thumb that locks upon crossing the completion threshold or recoils elastically.
Slide to Deploy Production
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/kinetic-swipe-button.json"
Props
TypeScript props supported by <KineticSwipeButton />.
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | "Slide to Deploy Production" | Prompt label displayed along the actuator track. |
| completedLabel | string | "Deployment Triggered" | Confirmation label displayed once the swipe completes. |
| threshold | number | 0.78 | Track fraction (0.5 to 0.95) required to lock confirmation. |
| stiffness | number | 360 | Spring stiffness coefficient for thumb travel and recoil. |
| damping | number | 26 | Spring damping coefficient controlling thumb snap-back. |
| onComplete | () => void | — | Callback executed when the swipe handle passes completion threshold |
Key Features
- Pointer-captured horizontal actuator thumb coupled to a Hooke's Law spring.
- Snaps into locked confirmation when dragged past the threshold ratio or recoils smoothly to origin if released early.
- Includes a one-click reset state after confirmation.
Keyboard & Accessibility
- Thumb actuator is a semantic button supporting Enter and Space keys for single-keystroke completion.
- Respects prefers-reduced-motion by disabling continuous spring interpolation.
- Maintains high-contrast focus-visible ring indicators.