خوش آمدید!

راه‌اندازیِ فضای کاری‌ات چند قدمِ کوتاه دارد؛ کمتر از یک دقیقه طول می‌کشد.

قدم‌خورStepper

کاربر رو قدم‌به‌قدم ببر جلو؛ می‌تونی نشانگرها رو شماره، نقطه یا نوار بذاری، جریان رو افقی یا عمودی بچینی و محتوای هر قدم رو با حرکت نرم عوض کنی.

محمدجواد

ساخته شده توسط محمدجواد

سازنده فارسی‌فای، بچه دولوپر

وابستگی‌ها

بدون وابستگی

نوع تعامل

روی هر نشانگر بزنی، مستقیم می‌ری همون قدم؛ توی حالت خطی فقط قدم‌هایی که رسیدی بازن. دکمه‌های قبلی/ادامه توی RTL خودشون آینه می‌شن و قدم آخر «پایان» می‌شه. ارتفاع پنل هم بین قدم‌ها نرم جا باز می‌کنه.

پراپ‌ها

گزینه‌هایی که می‌تونی به کامپوننت بدی؛ ستاره‌دارها اجباری‌اند.

children
ReactNode

قدم‌ها؛ هر کدوم داخل `<Step>` با `title`، `description` و `icon` اختیاری.

step
number

اگه می‌خوای قدمِ جاری دستِ خودت باشه، این رو همراهِ `onStepChange` بده؛ ندیش خودش از `initialStep` شروع می‌کنه.

initialStep
numberپیش‌فرض: 1

قدمی که اول نشون داده می‌شه.

onStepChange
(step: number) => voidپیش‌فرض: () => {}

هر بار قدم عوض شد صدا زده می‌شه.

onFinalStepCompleted
() => voidپیش‌فرض: () => {}

وقتی از قدمِ آخر رد شدی.

indicator
"numbers" | "dots" | "bars"پیش‌فرض: "numbers"numbers · dots · bars

شکلِ نشانگرها توی چیدمانِ افقی؛ عمودی همیشه شماره‌ست.

نصب

۱. این آدرس رو یک‌بار توی components.json بذار تا shadcn مخزن فارسی‌فای رو بشناسه.

components.jsonjson
{
  "registries": {
    "@farsify": "https://farsify.ir/r/{name}.json"
  }
}

۲. بعد با دستورِ زیر کامپوننت رو نصب کن.

npx shadcn@latest add @farsify/stepper

پیش‌نیاز: Tailwind CSS v4 و صفحهٔ راست‌به‌چپ dir="rtl".

نمونه

stepper.tsxtsx
"use client";

import Stepper, { Step } from "@/components/farsify/stepper";

export function SignupFlow() {
  return (
    <Stepper width={440} linear>
      <Step title="حساب">
        <h3>ساخت حساب</h3>
        <p>ایمیل و گذرواژه‌ات را وارد کن.</p>
      </Step>
      <Step title="نمایه">
        <h3>نمایه‌ات را کامل کن</h3>
        <p>نام و عکسِ نمایه همین‌جا می‌نشیند.</p>
      </Step>
      <Step title="پایان">
        <h3>آماده‌ای!</h3>
        <p>حسابت ساخته شد.</p>
      </Step>
    </Stepper>
  );
}

// کنترل‌شده: گامِ جاری از بیرون می‌آید
<Stepper step={step} onStepChange={setStep} />

نکته‌ها

  • اگه فرم واقعیه، `linear` رو روشن کن؛ این‌طوری کاربر از قدم ۲ نمی‌تونه بپره به ۴ و فقط قدم‌هایی که رسیده بازن.
  • روی موبایل چیدمان خودش عمودی و جمع‌وجور می‌شه؛ لازم نیست media query بنویسی.
  • `completedContent` رو بده تا صفحه‌ی پایان جای قدم‌ها بشینه؛ وگرنه فقط تیک‌ها و نشانگرها می‌مونن.
  • چند قدم‌خور پلکانی داری؟ فقط `initialStep` هر کدوم رو عوض کن؛ برای سینک با بیرون هم `step` و `onStepChange` رو بده.

مجوز

کد بعد از نصب مالِ خودته؛ هر تغییری خواستی بده و توی پروژه‌ی خودت نگهش دار. برای پروژه‌های شخصی و تجاری آزاده، حتی اگه کدت بسته باشه. فقط اسم و لینک فارسی‌فای رو یه جا توی پروژه نگه دار.