Path Stepper React Component

LIVE PREVIEWInteract with the component

Just React. No extra dependencies.

Copy the component and its CSS module into your project.

CSS Modules

Usage

Matches your current playground settings.

import PathStepper from "./PathStepper";

export default function Example() {
  return (
    <PathStepper
      items={[
        {
          "id": "idea",
          "label": "The idea",
          "description": "Give it a starting point."
        },
        {
          "id": "form",
          "label": "The form",
          "description": "Find the right shape."
        },
        {
          "id": "finish",
          "label": "The finish",
          "description": "Make the details count."
        }
      ]}
      defaultIndex={1}
      color={"#b1c5cc"}
      label={"Design progress"}
    />
  );
}

Using Path Stepper

Supply the route through items and use activeIndex to reflect progress in your flow. onStepChange receives both the selected index and its item.

The component displays progress without enforcing business rules. Mark steps disabled when users must not jump ahead, and keep descriptions short enough to scan.

Props

Name	Type	Required	Default	Description
items	Array<{ id?, label, description?, disabled? }>	No	[]	Ordered step labels, descriptions and optional disabled states.
activeIndex	number	No	undefined	Controlled current step index.
defaultIndex	number	No	0	Initial uncontrolled step index.
onStepChange	function	No	undefined	Receives the selected index and item.
color	string	No	"#b1c5cc"	Completed and current step colour.
label	string	No	"Progress"	Accessible navigation label.
className	string	No	""	Additional classes on the root element.
style	CSSProperties	No	undefined	Inline styles for sizing, typography and appearance.