Stepper

Show where a person is in a multi-step flow and what is done.

$npx shadcn@latest add @silicon-ui/stepper

motionproduct

Installation

$npx shadcn@latest add @silicon-ui/stepper

Install the dependencies.
$npm install motion
Copy these files into your project. Shared files are skipped if you already have them.
- components/silicon-ui/stepper/stepper.tsx
- components/silicon-ui/stepper/stepper.module.css
Install the foundation once per app for the design and motion tokens: $npx shadcn@latest add @silicon-ui/silicon-foundation

Source codetsx

import { Stepper } from "@/components/silicon-ui/stepper/stepper";

Prop	Type	Default
`steps*`	`StepperStep[]`	—
`current*` Index of the step in progress. `steps.length` marks the whole flow complete.	`number`	—
`orientation`	`StepperOrientation` `"horizontal""vertical"`	`"horizontal"`
`onStepSelect` Called with the index of a completed step when it is chosen. Without it the stepper is a read-only indicator.	`(index: number) => void`	—
`details` `current` shows only the active step's description, for tight spaces. Errors always show.	`"all" \| "current"`	`"all"`
`compact` Markers only; labels stay available to assistive tech. Horizontal steppers switch to this below 30rem on their own and show the current step's label underneath.	`boolean`	`false`
`label` Accessible name for the stepper.	`string`	`"Progress"`
`completeLabel` Announced, and shown in the compact caption, once every step is complete.	`string`	`"All steps complete"`
`className`	`string`	—