Stepper

Step-by-step progress. Free, MIT · Navigation and layout › Switching

Installation

npx valyro-cli@latest add stepper

npx shadcn@latest add https://valyro.xyz/r/stepper.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { Stepper } from 'valyro-ui';

Prop	Type	Default
`steps`	`StepperStep[]`		Steps in order; their state follows from `value` unless marked as failed. Or compose them as `Stepper.Step` children.
`children`	`ReactNode`		The compound form instead of `steps`: `Stepper.Step` elements.
`value`	`number`		Index of the current step.
`defaultValue`	`number`	`0`	Initial `value` when uncontrolled.
`onValueChange`	`(index: number) => void`		Called with the new `value` when it changes.
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Steps in a row joined by connectors, or stacked in a column with a connector line down the side.
`clickable`	`boolean`	`false`	Steps before the current one become buttons that jump back to them.
`labels`	`Partial<StepperLabels>`		Screen-reader text announced after each step title, per state.

Stepper.Step (StepperStepPart)

Tabs — Tabs
Segmented Control — Mode switcher
Pagination — Page navigation
App Shell — Application frame
Navbar — Top navigation bar
Sidebar — Side navigation panel
Resizable Panels — Panels with draggable dividers
Breadcrumbs — Breadcrumb trail
Dropdown Menu — Dropdown menu
Context Menu — Right-click menu
Command Palette — ⌘K-style command menu
Keyboard Map Overlay — Keyboard shortcut map for a screen: search, keyboard view and practice mode