Stepper

Component 114

About

Stepper UI component.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Stepper to your project and fits it to your theme.

Code

How Stepper is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import {
  Stepper,
  StepperIndicator,
  StepperItem,
  StepperSeparator,
  StepperTrigger,
} from "@/components/ui/stepper";

const steps = [1, 2, 3, 4];

function Component() {
  return (
    <div className="mx-auto min-w-[300px] max-w-[400px] space-y-8 text-center">
      <Stepper defaultValue={2}>
        {steps.map((step) => (
          <StepperItem
            key={step}
            step={step}
            className="[&:not(:last-child)]:flex-1"
          >
            <StepperTrigger>
              <StepperIndicator asChild>{step}</StepperIndicator>
            </StepperTrigger>
            {step < steps.length && <StepperSeparator />}
          </StepperItem>
        ))}
      </Stepper>
      <p
        className="mt-2 text-xs text-muted-foreground"
        role="region"
        aria-live="polite"
      >
        Stepper with numbers only
      </p>
    </div>
  );
}

export { Component };

export default Component;