Steps
A step indicator for multi-step flows. Used on its own it is a controllable indicator; wrapped in StepsRoot it also drives panels, which stay mounted while hidden so form state survives navigation. useSteps exposes next, prev, and goTo for footer buttons, and linear stops a step ahead of the current one from being clicked while still allowing programmatic jumps.
- VehicleVIN or plate
- ContactWhere to send it
- ReviewConfirm and order
Installation
Import from the package. Do not run shadcn add in your app.
tsx
import { Steps } from "@carsxe/design-system/components/steps"Usage
tsx
import { Steps } from "@carsxe/design-system/components/steps"
const [value, setValue] = React.useState(1)
<Steps steps={checkout} value={value} onValueChange={setValue} />Vertical
- VehicleVIN or plate
- ContactWhere to send it
- ReviewConfirm and order
Linear
- VehicleVIN or plate
- ContactWhere to send it
- ReviewConfirm and order
The third indicator is disabled: linear steps can be revisited but not skipped ahead.
Wizard with panels
- VehicleVIN or plate
- ContactWhere to send it
- ReviewConfirm and order
Step 1 of 3. Ordering the report charges the account on file.
Disabled step
- Vehicle
- Finance
- Review
API Reference
| Prop | Type | Default |
|---|---|---|
| steps | Step[] | from StepsRoot |
| value | number | — |
| defaultValue | number | 0 |
| onValueChange | (value: number) => void | — |
| orientation | "horizontal" | "vertical" | "horizontal" |
| linear | boolean | false |