Skip to content

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/stepper

Needs 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.tsxcomponent
  • ember/stepper/stepper-demo.cssstyles
  • ember/stepper/stepper.cssstyles
  • ember/stepper/StepperDemo.tsxdemo
  • ember/nav-kit/motion.tsshared
  • ember/shared/spring.tsshared
  • ember/shared/accent.tsshared
  • ember/shared/ember.cssshared

API

PropTypeDefault
accentAccent'ember' | 'volt' | 'arc''ember'
stepsStepsstring'First, Second, Third, Fourth'
stepStepnumber0
orientationOrientation'auto' | 'horizontal' | 'vertical''auto'