Vertical Stepper

The VerticalStepper component displays a sequence of stages vertically, representing a process with completed, active, and pending states. It automatically updates item statuses based on completion logic.

import { VerticalStepper } from "tawuniya/components";

👉 View in Storybook

Props

Field	Type	Description
stageName	string | null	Title of the stage.
description	string | null	Optional description for the stage.
sideNode	React.ReactNode | string	Optional side node (e.g., timestamp or badge).
stageStatus	React.ReactNode	Optional custom status element.
isComplete	boolean	Marks whether the stage is complete.

Status Flow

• A stage marked isComplete: true is set to completed.
• The next stage after a completed one becomes active.
• Any stage before a completed stage is automatically considered completed if a later stage is completed.
• Remaining stages are marked as pending.

Usage

Basic Example

const steps = [
  { stageName: "Step 1", description: "Start process", isComplete: true },
  { stageName: "Step 2", description: "Verify details" },
  { stageName: "Step 3", description: "Finalize" },
];

<VerticalStepper items={steps} />;

With Side Nodes and Status

const steps = [
  {
    stageName: "Submitted",
    description: "Your request has been submitted",
    sideNode: "12 Jan 2025",
    isComplete: true,
  },
  {
    stageName: "In Review",
    description: "Our team is reviewing your request",
    sideNode: <Badge variant="primary">12 Jan 2025</Badge>,
    stageStatus: <Badge variant="secondary">In Progress</Badge>,
  },
  {
    stageName: "Completed",
    description: "Your request is complete",
  },
];

<VerticalStepper items={steps} />;

Variants

• Status

  • completed → Completed step (bg-primary)
  • active → Current/active step (bg-primary)
  • pending → Pending step (bg-muted-foreground/60) (default)

Notes

• The stepper uses verticalStepperVariants for styling states (completed, active, pending).
• Completed steps display a check icon.