v0.1.0

<PxSteps />ReactNavigation & dataFree

Wizard steps

Wizard progress with numbered nodes joined by pixel lines that fill as you advance; finished steps show a check and lead back on click.

View as Markdown

<PxSteps />· loading

Playground

Change a prop and the component re-renders. Props marked remounts set an initial value, so the component starts over.

Loading <PxSteps />

Props

defaultStepremounts

controlslive

React

<PxSteps
  steps={[
    "Details",
    "Billing",
    "Review",
    "Done"
  ]}
  defaultStep={2}
  controls
/>

Installation

pnpm dlx shadcn@latest add @lumesec/px-steps

First timeRegister the @lumesec registry once, or install by URL+

Adds @lumesec to your components.json:

pnpm dlx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json

Or skip the setup and install by URL:

npx shadcn@latest add https://elements.lumesec.ai/r/px-steps.json

Usage

px-steps-example.tsx

import { PxSteps } from "@/components/lumesec/px-steps";

export function Example() {
  return <PxSteps steps={["Details", "Billing", "Review", "Done"]} defaultStep={2} controls />;
}

Behaviour

Numbered nodes joined by pixel lines that fill as you advance. Finished steps show a check and can be clicked to go back.

API reference

Props

Also accepts every prop of <div> (React.ComponentProps<"div">), spread onto the root element.

stepTypenumber

Controlled current step, from 1. One more than the number of steps marks the flow complete. Rounded and clamped. Use with onStepChange.

defaultStepTypenumberDefault1

Initial step when uncontrolled.

stepsTypereadonly string[]Default["Details", "Billing", "Review", "Done"]

Step names, in order.

controlsTypebooleanDefaultfalse

Shows Back and Continue buttons; Continue reads Finish on the last step.

onStepChangeType(step: number) => void

Called with the new step when the user moves: Back, Continue, Finish or a click on a finished step. Completing the flow reports the number of steps plus one.

onCompleteType() => void

Called when the user moves past the last step.

Ref

ref points at the root HTMLDivElement.

Accessibility

Step names are native buttons in an ordered list, each with an aria-label such as "Billing, step 2 of 4", plus ", done" for finished steps. The current one has aria-current="step".
Only finished steps act on click; the others are still focusable buttons.
The node graphic is an aria-hidden canvas. The step numbers over it are aria-hidden text, because each button's aria-label already carries the number.
Back is disabled on step 1, and Continue is disabled once the flow is complete.
Reduced motion: the connecting lines fill at once, the current step does not pulse and no sparks fire on completion.

Theming

Styled with Tailwind classes on your shadcn theme tokens, so light and dark follow your theme. The accent comes from --lumesec. See Theming.

This component reads --lumesec, --lumesec-shine, --lumesec-success, --foreground, --muted-foreground, --card, --border and --muted.

Notes

Without reduced motion the pulse around the current step animates continuously while the steps are on screen.
Moving past the last step, from the buttons or a controlled step, throws sparks from every node.
The Back, Continue and Finish labels are in English.

<px-tabs>

Tabspx-tabs

<px-pagination>

Paginationpx-pagination

<px-nav>

Sidebar navpx-nav

<px-accordion>

Accordionpx-accordion

Was this page helpful?

Related