Skip to content
Aback UI

Data Display

Steps

An ordered sequence with complete, current, and upcoming states for onboarding and how-it-works sections.

BetaUsed in Aback LaunchRegistry JSON (opens in a new tab)

  1. Completed: Create your workspace

    Name it and choose a data region.

  2. Current step: Invite your team

    Members get an email with a sign-in link.

  3. Not started: Connect a domain

    Point a CNAME record at your workspace.

  1. Completed: Submit

    Add your product in three minutes.

  2. Current step: Launch

    Go live on launch day.

  3. Not started: Get found

    Your page keeps bringing visitors.

Installation

Copy the source with the CLI to own and edit it, or import it from the npm package.

npx aback-ui@latest add steps

Writes components/ui/steps.tsx. First time in this project? Run npx aback-ui@latest init first, as the installation guide shows.

Usage

Import the parts you need from the installed file. The Code tab above has a complete, working example.

tsx
import { Step, Steps } from "@/components/ui/steps";

API reference

Props and composition points for Steps. Native element props pass through.

PropTypeDefaultDescription
Steps orientation"vertical" | "horizontal""vertical"Vertical for onboarding and checklists. Horizontal for how-it-works rows; it stacks on phones.
Step title / descriptionReactNodeNoneThe step name and a sentence about it. Required title.
Step status"complete" | "current" | "upcoming""upcoming"Complete shows a check, current is highlighted and marked aria-current=step.
Step statusLabelstringNoneReplaces the screen-reader status prefix, such as "Completed", for localization.
Step childrenReactNodeNoneExtra content under the description, such as the action for the current step.

Dependencies: @tabler/icons-react, plus the shared @/lib/utils helper.

Accessibility

Semantics, keyboard behavior, and the decisions that keep the component operable.

  • Steps is an ordered list, so the count and each position are announced.
  • Each step starts with a visually hidden status: Completed, Current step, or Not started. Status is never colour alone.
  • The current step carries aria-current=step.
  • Step numbers come from a CSS counter and markers are decorative, so numbers are not read twice.

Used in production

The Aback products whose interfaces shaped this component.

Related