# Saas Step Progress Navigation

Progress header in a subscription sign-up.

- id: `saas-step-progress-navigation`
- Page: https://agentic-ui-kit.com/components/saas-step-progress-navigation
- Live preview: https://agentic-ui-kit.com/live/component/saas-step-progress-navigation?piece=saas-step-progress-navigation

## Install

```bash
agentic-ui add saas-step-progress-navigation
npx shadcn@4.17.0 add @agentic-ui/saas-step-progress-navigation
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** step-status-indicator, current-completed-error-state, responsive-orientation, back-navigation, keyboard-navigation, roving-tabindex
- **Intents:** navigate, track-status, execute-flow
- **Suits domains:** saas, billing, ecommerce, hr, healthcare
- **Interaction:** step-navigate, keyboard-navigation
- **Screen role:** flow
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** progress header in a subscription sign-up, checkout step indicator, phase tracking in staff onboarding, staged clinical admission progress
- **Avoid when:** single-step processes, continuous progress with no discrete stages, where a bar is enough
- **Preserve when adapting:** step-status-semantics, responsive-orientation, keyboard-model
- **Replace when adapting:** domain-copy, step-labels, icons
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button
- **npm dependencies (registry):** lucide-react@0.577.0, zod-v3@npm:zod@^3.24.2
- **Registry dependencies:** lib-primitives