Components

Stepper

Step indicator whose connector lines fill with the lumen as steps complete, numbers crossfading into a drawn-in check.

Install

Copies the component source — plus its small internal deps — into your project. You own the code from the first minute.

terminal

npx lumora-ui@latest add stepper

Import

Using the workspace package instead? Deep imports keep cold starts lean; the barrel is fully tree-shakable either way.

app/page.tsx

import { Stepper } from "@lumora/ui/components/stepper";
// or from the barrel:
import { Stepper } from "@lumora/ui";

Props worth knowing

steps take { label, description? }; activeStep is the zero-based step in progress. Connectors fill with the lumen as steps complete and numbers crossfade into a drawn-in check. onStepClick makes steps clickable; orientation: "horizontal" | "vertical". Props extend the natural HTML element, so className, event handlers, and aria attributes pass straight through.