Component
Steps
Shows progress through a multi-step flow with numbered, stateful indicators.
Install
Run the CLI to copy the source into your project.
pnpm dlx @stalk-ui/cli add @stalk-ui/stepsExamples
Live previews render through the docs app's PandaCSS codegen.
<Steps aria-label="Onboarding" current={1} steps={[{ title: 'Account' }, { title: 'Site' }, { title: 'Review' }]} />
Props
Public component props extracted from the source TypeScript types.
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
| `steps` | `readonly Step[]` | Yes | - | - |
| `current` | `number` | No | - | Zero-based index of the active step (steps before it render complete). |
| `orientation` | `StepsOrientation` | No | - | - |
Variants
Variant axes exposed by the underlying PandaCSS recipe or slot recipe.
| Variant | Values |
|---|---|
| `orientation` | `horizontal`, `vertical` |
Registry
Files this component contributes to your registry install.
- Manifest: `/r/steps.json`
- Recipe: `steps`
- Files: `src/components/ui/steps.tsx`