Slide to Confirm

Drag a hot slug along a recessed channel and the channel heats behind it: a soft accent bloom trails the knob and fades to nothing, and the knob warms as it nears the end.

$149 once · every Pro piece

Customize

Label

Done label

Width

Reset after (ms)

Disabled

Let go early and it springs home with the wake receding; reach the end and it snaps into place, a heat pulse runs through the channel, and it settles into a calm accent fill with a solid accent knob and a drawn check. No borders, no gaps. Hold Right Arrow, or press Enter twice, from the keyboard.

Install

npx shadcn@latest add @obsyde/slide-confirm

Needs your licence key · Get Pro

Usage

Import it from where the CLI puts it, or copy the files below by hand.

import { SlideConfirm } from '@/components/obsyde/ember/slide-confirm/SlideConfirm';

export function Example() {
  return (
    <SlideConfirm label="Slide to confirm" doneLabel="Confirmed" />
  );
}

Files

What you get with Pro: plain React, TypeScript and CSS, with no dependencies.

ember/slide-confirm/SlideConfirm.tsxcomponent
ember/slide-confirm/slide-confirm.cssstyles
ember/slide-confirm/SlideConfirmDemo.tsxdemo
ember/tactile-kit/kit.tsshared
ember/shared/accent.tsshared
ember/shared/spring.tsshared
ember/shared/ember.cssshared

API

Prop	Type	Default
`accent`Accent	`'ember' \| 'volt' \| 'arc'`	`'ember'`
`label`Label	`string`	`'Slide to confirm'`
`doneLabel`Done label	`string`	`'Confirmed'`
`width`Width	`number`	`320`
`resetMs`Reset after (ms)	`number`	`2400`
`disabled`Disabled	`boolean`	`false`