I'll create a stepper component that follows shadcn/ui's design philosophy - composable, accessible, and styled with Tailwind CSS.
The stepper component follows shadcn/ui's composable pattern, allowing you to build custom steppers with different styles and behaviors.
import {
Stepper,
StepperStep,
StepperSeparator,
StepperLabel,
StepperDescription
} from "@/components/ui/stepper"
export function BasicStepper() {
return (
<Stepper activeStep={1}>
<StepperStep>
<StepperLabel>Step 1</StepperLabel>
<StepperDescription>Account details</StepperDescription>
</StepperStep>
<StepperSeparator />
<StepperStep>
<StepperLabel>Step 2</StepperLabel>
<StepperDescription>Personal information</StepperDescription>
</StepperStep>
<StepperSeparator />
<StepperStep>
<StepperLabel>Step 3</StepperLabel>
<StepperDescription>Review and submit</StepperDescription>
</StepperStep>
</Stepper>
)
}<Stepper activeStep={1} orientation="vertical">
{/* Steps here */}
</Stepper>The main container component for the stepper.
activeStep - The current active step (zero-based index)orientation - The orientation of the stepper ("horizontal" or "vertical")onChange - Callback fired when a step is clickedIndividual step component.
completed - Whether the step is completedoptional - Whether the step is optionalerror - Whether the step has an errordisabled - Whether the step is disabledindex - The index of the step (zero-based)The line between steps.
The text label for a step.
Optional description text for a step.
You can customize the appearance of the stepper by modifying the Tailwind classes or extending the component with your own styles:
<Stepper className="gap-8">
<StepperStep className="custom-step">
<StepperLabel className="text-primary">Custom Label</StepperLabel>
</StepperStep>
</Stepper>I'll update the stepper component to make the separator lines change color when proceeding through steps or returning to previous steps.
Now the separator lines will change color as you progress through the steps:
transition-colors classThis works for both horizontal and vertical orientations of the stepper.
<Stepper activeStep={currentStep}>
<StepperStep>
<StepperLabel>Step 1</StepperLabel>
</StepperStep>
<StepperSeparator index={0} /> {/* Will be colored when currentStep > 0 */}
<StepperStep>
<StepperLabel>Step 2</StepperLabel>
</StepperStep>
<StepperSeparator index={1} /> {/* Will be colored when currentStep > 1 */}
<StepperStep>
<StepperLabel>Step 3</StepperLabel>
</StepperStep>
</Stepper>The separators now visually indicate progress through the stepper, making it clearer to users which steps have been completed and which are still ahead.