About
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.
Code
How Steps is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import { Steps } from "@/components/ui/steps";
const SETUP = [
{ title: "Create account" },
{ title: "Verify identity" },
{ title: "Add payment method" },
{ title: "Finish setup" },
];
export default function StepsSizesDemo() {
return (
<div
style={{
maxWidth: 560,
width: "100%",
display: "flex",
flexDirection: "column",
gap: "var(--may-space-8, 2rem)",
}}
>
<Steps items={SETUP} current={2} size="sm" />
<Steps items={SETUP} current={2} size="md" />
<Steps items={SETUP} current={2} size="lg" />
</div>
);
}
Dependencies
More by adit-firdaus
View all
Popover
1
Adaptive Card
Box
Pagination