Shadcn-style Stepper
LayoutShadcn-style stepper for React. Multi-step progress indicator for forms, onboarding, and wizards.
StepperLayout · Web
Loading Storybook preview…
Installation
bun add @otfdashkit/ui
Usage
Import Stepper from @otfdashkit/ui.
Code
// Stepper — Shadcn-style stepper for React. Multi-step progress indicator for forms, onboarding, and wizards.
//
// Install:
// bun add @otfdashkit/ui
import { Stepper } from '@otfdashkit/ui'
export function Example() {
return (
<Stepper>
{/* your content */}
</Stepper>
)
}Props
Props declared in the Stepper source. Inherited HTML attributes are not listed.
| Prop | Type | Default | Description |
|---|---|---|---|
| currentSteprequired | number | ||
| stepsrequired | StepDef[] | ||
| className | string | ||
| direction | 'horizontal' | 'vertical' | 'horizontal' | 'horizontal' (default) | 'vertical' — vertical stacks steps as rows |