Navigationduskmoonimplemented7 demos

Steps

Steps shows progress through an ordered workflow.

Import@duskmoon-dev/components/steps

9API sections

33documented props

5behavior scenarios

Key API

itemscurrentstatusdirectionprogressDotpercent

Usage

When to use

Use it when users need to move between sections, pages, steps, or contextual actions.
Expose current and disabled state so navigation remains clear to keyboard and screen-reader users.

Implementation notes

StylesheetImport @duskmoon-dev/components/styles.css once in the app or docs shell.

StateStart with default props for static examples, then switch to controlled props when state must be shared.

ThemeThe preview inherits the active DuskMoon data-theme value from the docs layout.

Features

Wayfinding

Covers the route, section, step, or action-list patterns that help users move through an interface.

Current state

Shows selected, active, open, or current props where the component exposes them.

Primary API surface

Steps is most often configured through `items`, `current`, `status`, `direction`.

Covered behavior

Renders items with DuskMoon stepper classes and automatic status

Feature Demos

Feature demos are authored for the component page, then supplemented with behavior scenarios from the component test coverage.

Preview

PlanDefine scope

BuildImplement UI

ShipRelease

Basic usage

authored

Import the component stylesheet and Steps from its package subpath, then render it with the core props.

Source

import "@duskmoon-dev/components/styles.css";
import { Steps } from "@duskmoon-dev/components/steps";

export function Example() {
  return (<Steps
  current={1}
  items={[
    { title: "Plan", description: "Define scope" },
    { title: "Build", description: "Implement UI" },
    { title: "Ship", description: "Release" }
  ]}
/>);
}

Preview

PlanDefine scope

BuildImplement UI

ShipRelease

Renders items with DuskMoon stepper classes and automatic status

test-backed

Steps scenario from the component test coverage: renders items with duskmoon stepper classes and automatic status.

Source

import "@duskmoon-dev/components/styles.css";
import { Steps } from "@duskmoon-dev/components/steps";

export function StepsRendersItemsWithDuskMoonDemo() {
  return (<Steps
  current={1}
  items={[
    { title: "Plan", description: "Define scope" },
    { title: "Build", description: "Implement UI" },
    { title: "Ship", description: "Release" }
  ]}
/>);
}

Preview

PlanDefine scope

BuildImplement UI

ShipRelease

Supports direction, status, className, and percent progress

test-backed

Steps scenario from the component test coverage: supports direction, status, classname, and percent progress.

Source

import "@duskmoon-dev/components/styles.css";
import { Steps } from "@duskmoon-dev/components/steps";

export function StepsSupportsDirectionStatusClassNameDemo() {
  return (<Steps
  current={1}
  items={[
    { title: "Plan", description: "Define scope" },
    { title: "Build", description: "Implement UI" },
    { title: "Ship", description: "Release" }
  ]}
/>);
}

Preview

PlanDefine scope

BuildImplement UI

ShipRelease

Calls onChange for clickable steps and ignores disabled items

test-backed

Steps scenario from the component test coverage: calls onchange for clickable steps and ignores disabled items.

Source

import "@duskmoon-dev/components/styles.css";
import { Steps } from "@duskmoon-dev/components/steps";

export function StepsCallsOnChangeForClickableDemo() {
  return (<Steps
  current={1}
  items={[
    { title: "Plan", description: "Define scope" },
    { title: "Build", description: "Implement UI" },
    { title: "Ship", description: "Release" }
  ]}
/>);
}

Preview

PlanDefine scope

BuildImplement UI

ShipRelease

Supports progressDot boolean and custom renderer

test-backed

Steps scenario from the component test coverage: supports progressdot boolean and custom renderer.

Source

import "@duskmoon-dev/components/styles.css";
import { Steps } from "@duskmoon-dev/components/steps";

export function StepsSupportsProgressDotBooleanAndDemo() {
  return (<Steps
  current={1}
  items={[
    { title: "Plan", description: "Define scope" },
    { title: "Build", description: "Implement UI" },
    { title: "Ship", description: "Release" }
  ]}
/>);
}

Preview

PlanDefine scope

BuildImplement UI

ShipRelease

Supports Steps.Step children compatibility and root ref

test-backed

Steps scenario from the component test coverage: supports steps.step children compatibility and root ref.

Source

import "@duskmoon-dev/components/styles.css";
import { Steps } from "@duskmoon-dev/components/steps";

export function StepsSupportsStepsStepChildrenDemo() {
  return (<Steps
  current={1}
  items={[
    { title: "Plan", description: "Define scope" },
    { title: "Build", description: "Implement UI" },
    { title: "Ship", description: "Release" }
  ]}
/>);
}

Preview

Sunshine Theme

PlanDefine scope

BuildImplement UI

ShipRelease

Moonlight Theme

PlanDefine scope

BuildImplement UI

ShipRelease

Theme aware

authored

Docs previews inherit the DuskMoon data-theme value. Use the header switch to compare light and dark rendering.

Source

<div data-theme="sunshine">
  <Steps
  current={1}
  items={[
    { title: "Plan", description: "Define scope" },
    { title: "Build", description: "Implement UI" },
    { title: "Ship", description: "Release" }
  ]}
/>
</div>

<div data-theme="moonlight">
  <Steps
  current={1}
  items={[
    { title: "Plan", description: "Define scope" },
    { title: "Build", description: "Implement UI" },
    { title: "Ship", description: "Release" }
  ]}
/>
</div>

API

The API reference below lists every parsed exported type or interface for Steps. Start with `items`, `current`, `status`, `direction` for common usage.

Types: packages/components/src/components/steps/Steps.types.tsScenarios: packages/components/src/components/steps/Steps.test.tsx

StepsPropsinterface extends Omit< ComponentProps<"div">, "children" | "onChange" >

Prop	Type	Required	Description
`items`	`StepItem[]`	No	items configures Steps.
`current`	`number`	No	current configures Steps.
`status`	`StepsStatus`	No	status configures Steps.
`direction`	`StepsDirection`	No	direction configures Steps.
`progressDot`	`boolean \| StepsProgressDotRender`	No	progressDot configures Steps.
`percent`	`number`	No	percent configures Steps.
`initial`	`number`	No	initial configures Steps.
`onChange`	`(current: number) => void`	No	onChange configures Steps.
`children`	`ReactNode`	No	children configures Steps.

StepsProgressDotInfointerface

Prop	Type	Required	Description
`index`	`number`	Yes	index configures Steps.
`status`	`StepsStatus`	Yes	status configures Steps.
`title`	`ReactNode`	No	title configures Steps.
`description`	`ReactNode`	No	description configures Steps.
`content`	`ReactNode`	No	content configures Steps.

StepIteminterface

Prop	Type	Required	Description
`key`	`Key`	No	key configures Steps.
`title`	`ReactNode`	No	title configures Steps.
`subTitle`	`ReactNode`	No	subTitle configures Steps.
`description`	`ReactNode`	No	description configures Steps.
`content`	`ReactNode`	No	content configures Steps.
`children`	`ReactNode`	No	children configures Steps.
`icon`	`ReactNode`	No	icon configures Steps.
`status`	`StepsStatus`	No	status configures Steps.
`disabled`	`boolean`	No	disabled configures Steps.
`className`	`string`	No	className configures Steps.
`style`	`CSSProperties`	No	style configures Steps.

StepPropsinterface extends Omit< ComponentProps<"div">, "children" | "content" | "title" >

Prop	Type	Required	Description
`title`	`ReactNode`	No	title configures Steps.
`subTitle`	`ReactNode`	No	subTitle configures Steps.
`description`	`ReactNode`	No	description configures Steps.
`content`	`ReactNode`	No	content configures Steps.
`children`	`ReactNode`	No	children configures Steps.
`icon`	`ReactNode`	No	icon configures Steps.
`status`	`StepsStatus`	No	status configures Steps.
`disabled`	`boolean`	No	disabled configures Steps.

StepsDirectiontype

"horizontal" | "vertical"

StepsStatustype

"wait" | "process" | "finish" | "error"

StepsProgressDotRendertype

( iconDot: ReactNode, info: StepsProgressDotInfo, ) => ReactNode

StepComponenttype

ForwardRefExoticComponent< StepProps & RefAttributes<HTMLDivElement> >

StepsComponenttype

ForwardRefExoticComponent< StepsProps & RefAttributes<HTMLDivElement> > & { Step: StepComponent