Stepper

Component 30

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";
import { Shuffle } from "lucide-react";

function Component() {
  return (
    <div className="mx-auto max-w-xl space-y-8 text-center min-w-[300px]">
      <Stepper defaultValue={2}>
        <StepperItem step={1} className="[&:not(:last-child)]:flex-1">
          <StepperTrigger>
            <StepperIndicator asChild>
              <img
                className="rounded-full"
                src="https://cdn.21st.dev/assets/localized/2923de7cae4ce08ba2827c770ae363f1abf3666e37efb9362aba0f4dc59532ee.jpg"
                width={32}
                height={32}
                alt="Mike Palmer"
              />
            </StepperIndicator>
          </StepperTrigger>
          <StepperSeparator />
        </StepperItem>
        <StepperItem step={2} className="[&:not(:last-child)]:flex-1" loading>
          <StepperTrigger>
            <StepperIndicator />
          </StepperTrigger>
          <StepperSeparator />
        </StepperItem>
        <StepperItem step={3} className="[&:not(:last-child)]:flex-1">
          <StepperTrigger>
            <StepperIndicator asChild>
              <Shuffle size={14} strokeWidth={2} aria-hidden="true" />
              <span className="sr-only">Shuffle</span>
            </StepperIndicator>
          </StepperTrigger>
        </StepperItem>
      </Stepper>
      <p
        className="mt-2 text-xs text-muted-foreground"
        role="region"
        aria-live="polite"
      >
        Stepper with mixed elements
      </p>
    </div>
  );
}

export { Component };

export default Component;