---
name: "@stepper"
slug: "stepper"
description: "A single, focused shadcn/ui-style registry primitive for multi-step flows in React, Next.js, and Tailwind CSS projects. Headless and stateful: provides typed, value-safe step primitives (Stepper, StepperContent, StepperItem, StepperIndicator, StepperLabel, StepperList, StepperTrigger) with built-in ARIA attributes, guard support, and a predictable state machine. Does not own form state, routing, or validation — your app drives the flow. Installed as owned source via shadcn CLI. Currently in beta; open-source MIT. Use for: building accessible, typed multi-step wizards or onboarding flows in a shadcn/ui project without coupling to a heavyweight form-wizard library."
category: "Niche/single-purpose"
tags: ["accessibility", "buttons", "cards", "components", "design-system", "forms", "hooks", "marketing", "navigation", "onboarding", "tables"]
framework: "react"
license: "MIT"
author: "francozeta"
website: "https://francozeta-stepper.vercel.app"
github: "https://github.com/francozeta/stepper"
registry: "https://francozeta-stepper.vercel.app/registry.json"
pro: false
pro_url: null
github_stars: 6
component_count: 3
generated_at: "2026-07-28T08:00:50.948Z"
---

# @stepper

A single, focused shadcn/ui-style registry primitive for multi-step flows in React, Next.js, and Tailwind CSS projects. Headless and stateful: provides typed, value-safe step primitives (Stepper, StepperContent, StepperItem, StepperIndicator, StepperLabel, StepperList, StepperTrigger) with built-in ARIA attributes, guard support, and a predictable state machine. Does not own form state, routing, or validation — your app drives the flow. Installed as owned source via shadcn CLI. Currently in beta; open-source MIT. Use for: building accessible, typed multi-step wizards or onboarding flows in a shadcn/ui project without coupling to a heavyweight form-wizard library.

## Links

- Website: https://francozeta-stepper.vercel.app
- GitHub: https://github.com/francozeta/stepper
- Registry JSON: https://francozeta-stepper.vercel.app/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/stepper
- This file: https://sh4dcn.vercel.app/md/stepper.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://francozeta-stepper.vercel.app/registry.json
pnpm dlx shadcn@latest add https://francozeta-stepper.vercel.app/registry.json
bunx shadcn@latest add https://francozeta-stepper.vercel.app/registry.json
# clone the source repo
git clone https://github.com/francozeta/stepper.git
# fetch the raw registry index
curl -s https://francozeta-stepper.vercel.app/registry.json
```

## Components (3)

| name | type | description | install |
| --- | --- | --- | --- |
| stepper | registry:ui | A lightweight, composable stepper primitive for shadcn/ui-style multi-step flows. | `npx shadcn@latest add https://francozeta-stepper.vercel.app/stepper.json` |
| stepper-demo | registry:block | A styled Stepper demo with a default export and the Stepper source primitive. | `npx shadcn@latest add https://francozeta-stepper.vercel.app/stepper-demo.json` |
| stepper-intent-onboarding | registry:block | An intent-driven onboarding block with hidden Stepper state, intent routing, profile validation, interests, async setup, and a signed-in completion state. | `npx shadcn@latest add https://francozeta-stepper.vercel.app/stepper-intent-onboarding.json` |

## For AI agents

```text
You are adding components from @stepper to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/stepper.md) for the component list.
2. Fetch the machine-readable index: https://francozeta-stepper.vercel.app/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: stepper).
```