DUStepper
NavigationHorizontal or vertical step indicator.
import { DUStepper } from 'deri-ui';Live preview
- ✓Account
- 2Profile
- 3Done
typescript
<DUStepper current={1} steps={[{id:'1',title:'Account'},{id:'2',title:'Done'}]} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| steps | DUStepperStep[] | — | Steps |
| current | number | — | Active index |
| orientation | 'horizontal' | 'vertical' | — | Layout |
Usage
import { DUStepper } from 'deri-ui';
<DUStepper current={1} steps={[{id:'1',title:'Account'},{id:'2',title:'Done'}]} />Customize with className, radius, and Tailwind utilities. Theme tokens come from deri-ui/tailwind.preset.
Related
© 2026 Deri Ui. Developed by Deribew Shimelis. Copy and use the code freely in your projects.