Progress Steps
Display progress through a multi-step process
import { ProgressSteps } from "@plexui/ui/components/ProgressSteps";Examples
Overview
current
orientation
size
color
connectorStyle
Sizes
current
size
Vertical
Default
With dashed connector
With Icons
With Navigation
Step 1 of 4
Your details
Minimal
current
color
Icons Only
Colors
Default
Success
Reference
ProgressSteps (root)
| Prop | Type | Default | Description |
|---|---|---|---|
current | number | — | Current active step (1-based) |
orientation | "horizontal" | "vertical" | "horizontal" | Layout direction |
size | "sm" | "md" | "lg" | "md" | Step indicator size |
color | "default" | "success" | "default" | Color scheme for completed/active steps |
connectorStyle | "solid" | "dashed" | "solid" | Connector line style |
variant | "minimal" | — | Compact bar variant (requires total) |
total | number | — | Total steps for minimal variant |
ProgressSteps.Step
| Prop | Type | Default | Description |
|---|---|---|---|
icon | ReactNode | — | Custom icon instead of step number |
ProgressSteps.Title — Wrapper for step title text. Applies appropriate styling based on step state.
ProgressSteps.Description — Wrapper for step description text. Applies appropriate styling based on step state.