Stepper

Multi-step progress indicator with connecting lines and dot notation.

Preview

Installation

npx drivn add stepper

Usage

1 import * as React from "react"
2 import { Stepper } from "@/components/ui/stepper"
3 
4 export default function Page() {
5   const [step, setStep] = React.useState(1)
6 
7   return (
8     <Stepper step={step} onStepChange={setStep}>
9       <Stepper.Item />
10       <Stepper.Item />
11       <Stepper.Item />
12       <Stepper.Item />
13     </Stepper>
14   )
15 }

Drivn Feature

Text Labels

Use label prop for text inside indicators.

With Icons

Replace numbers with icons.

Vertical

Stack steps vertically.

Without Line

Remove the connecting line between steps.

API Reference

Stepper

Prop	Type	Default	Description
`step`	number	0	Current active step (0-indexed).
`onStepChange`	(step: number) => void	—	Callback when a step is clicked.
`orientation`	'horizontal' \| 'vertical'	'horizontal'	Layout direction of the stepper.
`line`	boolean	true	Show connecting line between steps.
`className`	string	—	Additional CSS classes.
`children`	ReactNode	—	Stepper.Item sub-components.

Stepper.Item

Prop	Type	Default	Description
`label`	string	—	Text inside the indicator. Omit for auto-number.
`icon`	ComponentType \| ReactElement	—	Icon replacing the number or label.
`disabled`	boolean	false	Prevents clicking this step.
`className`	string	—	Additional CSS classes.

1	import * as React from "react"
2	import { Stepper } from "@/components/ui/stepper"
3
4	export default function Page() {
5	const [step, setStep] = React.useState(1)
6
7	return (
8	<Stepper step={step} onStepChange={setStep}>
9	<Stepper.Item />
10	<Stepper.Item />
11	<Stepper.Item />
12	<Stepper.Item />
13	</Stepper>
14	)
15	}