Primitives

Stepper

Where someone is in a flow of a few steps: onboarding, a setup, an import. An ordered list; the current step is marked for screen readers and takes the ◆, done steps a check, a step that needs attention a warning, and each step's state is read in words. The line to the next step fills when one is done. Below 640px a horizontal stepper keeps only the current label in view. Server safe.

view .md

Preview

Account, completedName and email
Connect a bank, current stepRead only
First budget, not startedTwo minutes
Done, not started

vertical, a step that needs attention

Account, completedName and email
Connect a bank, needs attentionRead only
First budget, current stepTwo minutes

Installation

terminal

bash

npx @entrepta/cli@latest add stepper

// Resolves dependencies, copies the source, and installs npm packages automatically.

Usage

stepper.tsx

tsx

import { Stepper } from "@/components/entrepta/stepper"

<Stepper
  steps={[
    { id: "account", label: "Account" },
    { id: "bank", label: "Connect a bank", description: "Read only" },
    { id: "budget", label: "First budget" },
  ]}
  current="bank"
/>

Props

Prop	Type	Default	Description
steps	{ id, label, description? }[]	-	In order
current	string	-	The id of the step in progress
completed	string[]	every step before current	The ids of the steps done
errored	string[]	-	Steps that need attention; wins over completed
orientation	"horizontal" \| "vertical"	"horizontal"	A row, or a column with every label
labels	{ complete?, current?, error?, upcoming? }	-	The state words