Radial Stepper displays a circular progress indicator for multi-step processes, available in Primary and Neutral styles, four sizes, and both horizontal and vertical layouts.
Loading demo: radial-stepper-real-world
npx sdaia-ui@latest add radial-stepper
import { RadialStepper } from "@/components/ui/radial-stepper"<RadialStepper steps={4} current={1} style="primary" layout="horizontal" /><RadialStepper steps={4} current={1} style="primary" layout="horizontal" />Radial stepper in the default neutral style.
Loading demo: radial-stepper-neutral
Radial stepper on a coloured background.
Loading demo: radial-stepper-on-color
Radial stepper with steps arranged vertically.
Loading demo: radial-stepper-vertical
Radial stepper with steps arranged horizontally.
Loading demo: radial-stepper-horizontal
Props for the RadialStepper component.
Prop | Type | Default | Required |
|---|---|---|---|
size | '48px' | '64px' | '80px' | '120px' | '64px' | optional |
layout | 'Horizontal' | 'Vertical' | 'Horizontal' | optional |
variant | 'Primary' | 'Neutral' | 'Primary' | optional |
rtl | boolean | false | optional |
indicator | '1 of 4' | '2 of 4' | '3 of 4' | '4 of 4' | '1 of 4' | optional |
previousLabel | string | 'Previous:' | optional |
showPrevious | boolean | true | optional |
stepName | string | 'Step One' | optional |
showStepName | boolean | true | optional |
description | string | 'this is step description' | optional |
showDescription | boolean | true | optional |
nextLabel | string | 'Next:' | optional |
showNext | boolean | true | optional |