مراحل

<Stepper current={1} steps={[
{ title: "سبد خرید", description: "۳ کالا" },
{ title: "اطلاعات ارسال", description: "آدرس و زمان" },
{ title: "پرداخت" },
{ title: "تأیید" },
]} />

<ol class="k-steps" aria-label="مراحل">
  <li class="k-steps__step" data-status="complete"><span class="k-steps__marker" aria-hidden="true"><svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 10.5 3.2 3L15 7"></path></svg></span><span class="k-steps__title">سبد خرید<span class="k-sr-only">، انجام شده</span></span><span class="k-steps__description">۳ کالا</span></li>
  <li class="k-steps__step" data-status="current" aria-current="step"><span class="k-steps__marker" aria-hidden="true">۲</span><span class="k-steps__title">اطلاعات ارسال<span class="k-sr-only">، مرحلهٔ فعلی</span></span><span class="k-steps__description">آدرس و زمان</span></li>
  <li class="k-steps__step" data-status="upcoming"><span class="k-steps__marker" aria-hidden="true">۳</span><span class="k-steps__title">پرداخت</span></li>
  <li class="k-steps__step" data-status="upcoming"><span class="k-steps__marker" aria-hidden="true">۴</span><span class="k-steps__title">تأیید</span></li>
</ol>

<Stepper orientation="vertical" current={2} steps={[…]} />

<ol class="k-steps k-steps--vertical" aria-label="مراحل">
  <li class="k-steps__step" data-status="complete"><span class="k-steps__marker" aria-hidden="true"><svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 10.5 3.2 3L15 7"></path></svg></span><span class="k-steps__title">ایجاد حساب<span class="k-sr-only">، انجام شده</span></span><span class="k-steps__description">ایمیل و رمز عبور</span></li>
  <li class="k-steps__step" data-status="complete"><span class="k-steps__marker" aria-hidden="true"><svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 10.5 3.2 3L15 7"></path></svg></span><span class="k-steps__title">تأیید شماره موبایل<span class="k-sr-only">، انجام شده</span></span><span class="k-steps__description">کد پیامکی</span></li>
  <li class="k-steps__step" data-status="current" aria-current="step"><span class="k-steps__marker" aria-hidden="true">۳</span><span class="k-steps__title">اطلاعات کسب‌وکار<span class="k-sr-only">، مرحلهٔ فعلی</span></span><span class="k-steps__description">نام و نوع فعالیت</span></li>
  <li class="k-steps__step" data-status="upcoming"><span class="k-steps__marker" aria-hidden="true">۴</span><span class="k-steps__title">پایان</span></li>
</ol>