Stepper
Show progress through a sequence of labelled steps.
Installation
Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.
Copy an example into your project with the shadcn CLI: npx shadcn@latest add https://design.gaudi.site/r/stepper-basic.json.
Usage
Examples
Simple linear steps
Titles and descriptions
Controlled with icons and badges
Loading state
Progress bar
Vertical orientation
API
6 props
Accessibility
The active item exposes aria-current="step" and completed items have readable status. Selectable completed steps are buttons named by their label.
Notes
- The convenience Stepper displays progress. Use Wizard for validation and navigation; the compound Stepper exports support custom interactive flows.
Related
WizardA guided multi-step form with validation, progress and recoverable completion.6 examplesLoaderAn accessible loading indicator with arcs, dots, expanding rings, and an indeterminate bar. Loader replaces the former Spinner component and story.3 examplesFieldField composes form label, description, error, and input building blocks.7 examplesSwitchSwitch renders a token-styled boolean preference control.4 examplesToggleGroupSingle or multiple pressed choices for view modes and compact formatting controls.6 examplesPillPill renders compact category and status labels.4 examples