Stepper
Progress through steps. Each completed connection burns across like a fuse, leaving a bone line; the step behind fills and draws a check.
$149 once · every Pro piece
Customize
Going back retracts the line.
Install
npx shadcn@latest add @obsyde/stepperNeeds your licence key · Get Pro
Usage
Import it from where the CLI puts it, or copy the files below by hand.
import { Stepper } from '@/components/obsyde/ember/stepper/Stepper';
export function Example() {
return (
<Stepper step={0} />
);
}
Files
What you get with Pro: plain React, TypeScript and CSS, with no dependencies.
ember/stepper/Stepper.tsxcomponentember/stepper/stepper-demo.cssstylesember/stepper/stepper.cssstylesember/stepper/StepperDemo.tsxdemoember/nav-kit/motion.tssharedember/shared/spring.tssharedember/shared/accent.tssharedember/shared/ember.cssshared
API
| Prop | Type | Default |
|---|---|---|
accentAccent | 'ember' | 'volt' | 'arc' | 'ember' |
stepsSteps | string | 'First, Second, Third, Fourth' |
stepStep | number | 0 |
orientationOrientation | 'auto' | 'horizontal' | 'vertical' | 'auto' |