Stepper
NEWA multi-step progress indicator with line fills, gliding active rings, drawing checkmarks, and direction-aware sliding step panels.
Orientation:
- 1AccountPersonal info
- 2
- 3
- 4
Step 1: Your Account
Configure your profile details and preferences.
Installation
Add the component directly to your repository using shadcn CLI:
npx shadcn@latest add Surajmaurya1/easyui/stepper
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| steps | Step[] | undefined | List of steps with title and optional description |
| current | number | 0 | Zero-based index of the active step |
| onStepChange | (index: number) => void | undefined | Callback enabling jump-back clicks on completed steps |
| orientation | 'horizontal' | 'vertical' | 'horizontal' | Layout direction of the stepper line |
| className | string | undefined | Additional CSS classes for the stepper container |