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";
export default function StepsErrorDemo() {
return (
<div style={{ maxWidth: 420, width: "100%" }}>
<Steps
orientation="vertical"
current={2}
items={[
{ title: "Prepare update", description: "Update package — 2.1 GB" },
{ title: "Download", description: "Downloaded over Wi-Fi" },
{
title: "Verify",
description: "Verification failed. Tap to retry.",
status: "error",
},
{ title: "Install" },
]}
/>
</div>
);
}
Dependencies
More by adit-firdaus
View all
Popover
1
Adaptive Card
Box
Pagination