Stepper

The Stepper component displays a progress stepper with multiple steps, each having a title, description, and status. It supports marking the last step as complete, custom statuses, and horizontal scrolling for long steppers.

import { Stepper } from "tawuniya/components";

👉 View in Storybook

---

Props

Prop	Type	Default	Description
steps	{ id: string; title: React.ReactNode; description: React.ReactNode; status: string }[]	—	Array of step objects with id, title, description, and status.
stepValue	string	—	Current step id.
markComplete	boolean	false	If true, the last step is visually marked as complete.
className	string	—	Additional Tailwind classes for the stepper container.

Usage

Basic Example

<Stepper
  stepValue="step2"
  steps={[
    { id: "step1", title: "Step 1", description: "Start", status: "completed" },
    {
      id: "step2",
      title: "Step 2",
      description: "In Progress",
      status: "active",
    },
    {
      id: "step3",
      title: <p>"Step 3"</p>,
      description: <Badge variant="primary">Pending</Badge>,
      status: "pending",
    },
  ]}
/>

Mark Completed Steps

The markComplete prop controls how the last step is visually represented when it is completed.

markComplete = true:

• Only affects the last step in the sequence.
• When stepValue is set to the last step's id, the last step is marked as complete:
  • The circle becomes larger.
  • A check mark (✔) appears inside the circle.

Example:

<Stepper
  stepValue="step2"
  markComplete
  steps={[
    { id: "step1", title: "Step 1", description: "Start", status: "completed" },
    {
      id: "step2",
      title: "Step 2",
      description: "In Progress",
      status: "active",
    },
    { id: "step3", title: "Step 3", description: "Pending", status: "pending" },
  ]}
/>

Features

• Displays step title, description, and status.
• Supports custom statuses like completed, active, rejected, or pending.
• Responsive with horizontal scrolling for long step sequences.
• Supports RTL layouts automatically.

Notes

• Each step automatically calculates its index based on the steps array.
• Step separator lines are dynamically positioned for proper spacing.
• Titles and descriptions can accept React nodes for custom content.