Navigation

Steps

Progress through a multi-step task (checkout, a payment, onboarding): numbered markers joined by hairlines; completed steps can link back.

Installation

Install the package (React 19):

terminal
npm install @krackedui/motion

Import the styles once, in your app entry or root layout:

/src/main.tsx
import '@krackedui/motion/styles.css';

Use it anywhere inside your app's <Theme> (see Installation):

/src/StepsExample.tsx
import { useState } from 'react';
import { Button, Steps } from '@krackedui/motion';

const steps = [
  { label: 'Payee', description: 'Who gets paid' },
  { label: 'Amount', description: 'How much and when' },
  { label: 'Review', description: 'Check and confirm' },
];

export function PaymentSteps() {
  const [current, setCurrent] = useState(1);
  return (
    <div className="flex w-full max-w-xl flex-col gap-4">
      <Steps steps={steps} current={current} onStepChange={setCurrent} label="Payment progress" />
      <div className="flex justify-end gap-2">
        <Button variant="secondary" disabled={current === 0} onClick={() => setCurrent((c) => Math.max(0, c - 1))}>Back</Button>
        <Button variant="primary" disabled={current === steps.length} onClick={() => setCurrent((c) => Math.min(steps.length, c + 1))}>
          {current >= steps.length - 1 ? 'Finish' : 'Next'}
        </Button>
      </div>
    </div>
  );
}

Examples

Read-only, with five steps

Without onStepChange the steps are plain text. Under 640px only the current step keeps its label.

All complete

current={steps.length} marks every step complete.

API Reference

Steps

A <nav> (all its props pass through) around an ordered list. Adds:

PropTypeDefault
steps
{ label: ReactNode; description?: ReactNode }[]
current
number
onStepChange
(index: number) => void
label
string
"Progress"

stepsVariants

PropTypeDefault
slots
tv recipe

Accessibility

  • A labelled nav around an ordered list; the current step has aria-current="step".
  • Each step announces its position and state ("Amount, step 2 of 3, current step"); markers and connectors are hidden from assistive tech.
  • With onStepChange, completed steps are buttons (Tab, Enter / Space); current and upcoming steps are not interactive.
  • On phones the labels of other steps are visually hidden but still announced.

Usage

  • Use for a linear task of 3–5 steps where people benefit from knowing how far along they are.
  • Pair it with Back / Next buttons; let people return to completed steps with onStepChange.
  • Don't use it to switch between independent panels: use Tabs.
  • Don't use it for a single percentage: use Progress.
© 2026 Motion. Internal documentation.