Stepper

Progress steps whose connecting line fills as you advance.

Installation

bash
npx shadcn@latest add https://www.rad-ui.com/r/stepper.json

React
import Stepper from "@/components/fx/stepper"

<Stepper label="Checkout progress" steps={["Cart", "Shipping", "Payment"]} current={1} />

An ordered list with aria-current="step" on the current step.
Completed steps say "(completed)" in text, not just with a tick.
prefers-reduced-motion: reduce (or data-rad-fx-motion="reduce" on an ancestor) changes state without animating.

Prop	Type	Default	Description
steps	string[]	—	Step labels.
current	number	—	Index of the current step.
label	string	'Progress'	Accessible name.