Saasflare UI
Components

Steps

Horizontal or vertical step indicator showing progress through a multi-stage flow or wizard.

Installation

npx shadcn@latest add https://ui.saasflare.io/r/steps.json
pnpm add @saasflare/ui

Usage

Loading…
"use client"import { Step, Steps } from "@saasflare/ui"/** A horizontal onboarding flow with the second step active. */export function Demo() {    return (        <Steps current={1} className="w-full max-w-lg">            <Step title="Create account" description="Email & password" />            <Step title="Connect data" description="Link a source" />            <Step title="Invite team" description="Add members" />            <Step title="Go live" description="Deploy" />        </Steps>    )}

Vertical

Loading…
"use client"import { Step, Steps } from "@saasflare/ui"/** A vertical setup checklist tracking progress through deployment stages. */export function Demo() {    return (        <Steps current={2} direction="vertical">            <Step title="Project created" description="saasflare-prod" />            <Step title="Environment configured" description="3 secrets added" />            <Step title="Build running" description="Installing dependencies" />            <Step title="Deployed" description="Pending build" />        </Steps>    )}

API Reference

Steps

Prop

Type

Step

Prop

Type

On this page