Radial Stepper
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.
'use client'; import { RadialStepper } from 'sdaia-ui'; export default function RadialStepperRealWorld() {Installation
npx sdaia-ui@latest add radial-stepper
Usage
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" />Examples
Neutral
Radial stepper in the default neutral style.
<RadialStepper size="64px" variant="Neutral" layout="Horizontal" indicator="2 of 4"On Color
Radial stepper on a coloured background.
<div className="rounded-xl bg-primary-600 p-6"> <RadialStepper size="64px" variant="Primary" layout="Horizontal"Vertical
Radial stepper with steps arranged vertically.
<RadialStepper size="64px" variant="Primary" layout="Vertical" indicator="2 of 4"Horizontal
Radial stepper with steps arranged horizontally.
<RadialStepper size="64px" variant="Primary" layout="Horizontal" indicator="2 of 4"API Reference
RadialStepperProps
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 |