Stepper

Usage

import Stepper from "@repo/ui/Stepper";
import { useState } from "react";

const [step, setStep] = useState(2);

<Stepper
  step={step}
  onChange={(step) => setStep(step)}
  steps={[
    { title: "مرحله اول", description: "راهنمای مرحله اول" },
    { title: "مرحله دوم", description: "راهنمای مرحله دوم" },
    { title: "مرحله سوم", description: "راهنمای مرحله سوم" },
    { title: "مرحله چهارم", description: "راهنمای مرحله چهارم" },
  ]}
/>;

Installation

npx the-dig@latest add Stepper

Props

Clarify whether step is zero- or one-based and keep it within steps.length. Add current-step semantics and keyboard guidance for clickable steps.

Prop	Type	Default
steps *	Array<{ title: string; description?: string }>	-
step *	number	-
onChange	(step: number) => void	-
vertical	boolean	false
className	string	-

Vertical

import Stepper from "@repo/ui/Stepper";
import { useState } from "react";

const [step, setStep] = useState(2);

<Stepper
  vertical
  step={step}
  onChange={(step) => setStep(step)}
  steps={[
    { title: "مرحله اول", description: "راهنمای مرحله اول" },
    { title: "مرحله دوم", description: "راهنمای مرحله دوم" },
    { title: "مرحله سوم", description: "راهنمای مرحله سوم" },
    { title: "مرحله چهارم", description: "راهنمای مرحله چهارم" },
  ]}
/>;