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.jsonpnpm add @saasflare/uiUsage
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