Stepper
Numbered step-by-step layout with vertical connector lines for installation guides, tutorials, and onboarding flows.
Installation
$ shadcn add @jalco/stepperUsage
import { Stepper } from "@/components/stepper"<Stepper />Examples
Status indicators
Use the status prop to indicate progress.
Completed steps show a checkmark, active steps are highlighted, and default steps are muted.
All statuses
Account created
Your account has been set up successfully.
Configure workspace
Set up your workspace preferences and integrations.
Invite your team
Add team members and assign roles.
All completed
Order placed
Your order #4821 has been received.
Payment confirmed
We've charged your card ending in 4242.
Shipped
Tracking number: 1Z999AA10123456784
With rich content
Installation guide
Install the package
Add the SDK to your project.
npm install @acme/sdkAdd your API key
Create a .env.local file and add your key.
ACME_API_KEY=sk_live_abc123def456Make your first request
Import the client and fetch data.
import { Acme } from "@acme/sdk"
const client = new Acme()
const users = await client.users.list()
console.log(users)Horizontal orientation
Horizontal stepper
Enter your payment information to continue.
Custom icons
Lucide icons
Create account
Sign up with your email and set a password.
Add payment method
Enter a credit card or connect a bank account.
Verify identity
Upload a photo ID to complete verification.
API Reference
Stepper
StepperItem
Notes
- Server component. No "use client" — renders entirely on the server with zero client JS.
- Auto-numbering. Steps are numbered automatically based on their order. Use the
stepprop to override. - No dependencies. Uses only React and Tailwind CSS — no external packages required.
- Composable. Nest any content inside StepperItem — code blocks, images, forms, lists, or other components.
- Horizontal mode. The horizontal orientation shows step circles with connector lines and only renders content for the active step. Ideal for checkout flows and wizards.