# 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.
- React: `import { PxSteps } from "@/components/lumesec/px-steps"`
- Collection: Pixel UI (https://elements.lumesec.ai/components/pixel-ui)
- Registry item: https://elements.lumesec.ai/r/px-steps.json
- Page: https://elements.lumesec.ai/components/pixel-ui/steps



Live preview: https://elements.lumesec.ai/view/px-steps

Demo source:

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

export default function PxStepsDemo() {
  return (
    <div className="w-full max-w-[400px] rounded-[14px] border border-border bg-card px-5 py-[18px] shadow-[0_14px_34px_-20px_rgb(0_0_0/0.4)]">
      <PxSteps steps={["Details", "Billing", "Review", "Done"]} defaultStep={2} controls />
    </div>
  );
}
```

## Playground

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

## Installation

```bash
npx shadcn@latest add @lumesec/px-steps
```

First time with the @lumesec registry? Register it once, or install by URL:

```bash
npx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json
npx shadcn@latest add https://elements.lumesec.ai/r/px-steps.json
```

## Usage

React:

```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.

| Prop           | Type                     | Default                                    | Description                                                                                                                                                   |
| -------------- | ------------------------ | ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `step`         | `number`                 | —                                          | Controlled current step, from 1. One more than the number of steps marks the flow complete. Rounded and clamped. Use with `onStepChange`.                     |
| `defaultStep`  | `number`                 | `1`                                        | Initial step when uncontrolled.                                                                                                                               |
| `steps`        | `readonly string[]`      | `["Details", "Billing", "Review", "Done"]` | Step names, in order.                                                                                                                                         |
| `controls`     | `boolean`                | `false`                                    | Shows Back and Continue buttons; Continue reads Finish on the last step.                                                                                      |
| `onStepChange` | `(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. |
| `onComplete`   | `() => 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](/docs/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.