Isometric Steps

An animated isometric staircase figure that shows progress through numbered steps, with a token that hops up or down to the current step and follows the pointer.

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

"use client";

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

export default function StepsDemo() {
  return (
    <div className="flex w-full items-center justify-center bg-background p-10 text-foreground">
      <div className="w-full max-w-xs">
        <Steps steps={5} current={2} />
      </div>
    </div>
  );
}