Steps

A numbered progress stepper for walking a user through a multi-step sequence like checkout or device setup, with horizontal/vertical layouts, per-step status (complete/current/upcoming/error), and an optional clickable mode with a sliding selection thumb.

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

import { Steps } from "@/components/ui/steps";

const SETUP = [
  { title: "Create account" },
  { title: "Verify identity" },
  { title: "Add payment method" },
  { title: "Finish setup" },
];

export default function StepsDemo() {
  return (
    <div style={{ maxWidth: 560, width: "100%" }}>
      <Steps items={SETUP} current={2} />
    </div>
  );
}