Step

Stable
WCAG 2.2 evidence
RTL

One step of a multi-step flow, such as onboarding or a leave request. It renders an <li>: place the steps in an <ol> named with aria-label (for example "Onboarding progress"), so assistive technology reads "list, 4 items" and each position. The current step carries aria-current="step"; every status is written as text ("Done", "In progress", "Up next", "Needs attention") and drawn with a different shape (check, ring, number, alert), never by colour alone (WCAG 1.3.1, 1.4.1, 4.1.2). The connecting lines hide themselves on the first and last step and mirror in right-to-left layouts. Presentational (no state, no React Aria): renders in React Server Components. Steps are not interactive; to let people jump back, put a link in label and keep its focus style. Consumer duties: step titles, translated status texts, and whether steps are navigable.

import { Step } from "@nexera-ui/react";

Loading example…

5
examples: 6
props: 3
live controls: 1
platform: 6
WCAG criteria: 1
block uses it

Try every prop. Copy the code.

Change the props and the code updates. Check light and dark, LTR and RTL, and phone width.

Loading…

status

description

orientation

Generated code

import { Step } from "@nexera-ui/react";

<Step />

Examples 4

The same examples as Storybook, rendered live. Open Code to copy one.

Statuses

Figma State: Complete, Current, Upcoming and Error, each with its status text and shape.

Loading example…

app.tsx

import { Step } from "@nexera-ui/react";

export function Statuses() {
  return (
    <ol aria-label="Leave request progress" className="m-0 flex max-w-2xl list-none p-0">
      <Step label="Dates" />
      <Step label="Approver" status="current" />
      <Step label="Documents" status="error" description="2 fields need attention" />
      <Step label="Submit" status="upcoming" />
    </ol>
  );
}

Vertical

Figma Orientation=Vertical: the rail runs beside the text; use it in narrow containers and side panels.

Loading example…

app.tsx

import { Step } from "@nexera-ui/react";

export function Vertical() {
  return (
    <ol aria-label="Onboarding progress" className="m-0 flex max-w-xs list-none flex-col p-0">
      <Step label="Account" orientation="vertical" />
      <Step label="Personal details" status="current" orientation="vertical" />
      <Step
        label="Documents"
        status="error"
        description="2 fields need attention"
        orientation="vertical"
      />
      <Step label="Review" status="upcoming" orientation="vertical" />
    </ol>
  );
}

Long labels

Long titles wrap; the steps share the row, so the list still fits at 320 px.

Loading example…

app.tsx

import { Step } from "@nexera-ui/react";

export function LongLabels() {
  return (
    <ol aria-label="Contract signing" className="m-0 flex max-w-md list-none p-0">
      <Step label="Review the employment contract" />
      <Step label="Upload identity documents" status="current" />
      <Step label="Sign electronically" status="upcoming" />
    </ol>
  );
}

Right to left

Right-to-left: the steps run from right to left and the lines follow.

Loading example…

app.tsx

import { Step } from "@nexera-ui/react";

export function RightToLeft() {
  return (
    <ol aria-label="تقدم الإعداد" className="m-0 flex max-w-2xl list-none p-0">
      <Step label="الحساب" statusLabel="تم" />
      <Step label="البيانات الشخصية" status="current" statusLabel="قيد التنفيذ" />
      <Step label="المستندات" status="upcoming" statusLabel="التالي" />
    </ol>
  );
}

Props 6

Press "Try it" on a card to load that prop into the playground.

label*Nexera

VisibleContent

Step title, for example "Personal details". It wraps instead of truncating.

statusNexera

"complete" | "current" | "upcoming" | "error"

Progress of the step: complete shows a check, current a ring and the number with aria-current="step", upcoming the number on a sunken circle, error an alert icon. Each also has a status text.

numberNexera

string

Number shown in the indicator of a current or upcoming step. Without it the step shows its position in the list (a CSS counter), which is what the Figma samples show. Decorative: the list already tells assistive technology the position.

descriptionNexera

ReactNode

Second line. Defaults to the status text (statusLabel). When you replace it, for example with "2 fields need attention", the status text is still read before it.

statusLabelNexera

string

Status text: shown as the description, or read before a custom description. Translate it.

orientationNexera

"horizontal" | "vertical"

Layout: horizontal puts the indicator on a track above centred text, vertical puts it on a rail beside start-aligned text. Use vertical in narrow containers.

* Required. React Aria props shown are the ones most apps use; the component accepts the rest of its React Aria props too.

Accessible by default.

Built on React Aria, and covered by the WCAG 2.2 evidence generated on every build.

WCAG 2.2 evidence

3 direct · 3 supporting

1.3.1Info and RelationshipsLevel A · tested directly
1.3.2Meaningful SequenceLevel A · supporting test
1.4.1Use of ColorLevel A · tested directly
1.4.10ReflowLevel AA · supporting test
1.4.12Text SpacingLevel AA · supporting test
4.1.2Name, Role, ValueLevel A · tested directly

Fits any width.

Nexera components respond to the space they are given. Drag the corner of the frame, or pick a width.

0 px · drag the corner

Styling hooks

Pass className to add Tailwind classes (merged last). State is exposed as data attributes, so you can style it with variants like data-pressed:.

Usage

<Step className="shadow-sm" />

Used in blocks

Profile photoSettings and preferences

Theme studio

Step

Try every prop. Copy the code.

Examples 4

Statuses

Vertical

Long labels

Right to left

Props 6

Accessible by default.

WCAG 2.2 evidence

Fits any width.

Styling hooks

Used in blocks

Related components