Running Order Timeline

A vertical dashed-line timeline block that lists sequential steps or event stages, each with a numbered marker, title, status badge, and description.

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

import BlockTimeline from "@/components/ui/block-timeline";

export default function BlockTimelineDemo() {
  return (
    <div className="w-full max-w-xl mx-auto p-6 bg-background text-foreground">
      <BlockTimeline />
    </div>
  );
}