Timeline

An ordered list of steps with pending, running, done and failed markers joined by a line, for deploys, agent runs and order tracking.

shadcn Base UIUsed in 3 blocks

Installation

npx shadcn@4.19.0 add https://ui.edbn.me/r/timeline.json

Source

Usage

timeline-basic.tsx

34 lines

"use client";
import {
  Timeline,
  TimelineContent,
  TimelineDescription,
  TimelineIndicator,
  TimelineItem,
  TimelineTitle,
} from "@/components/ui/timeline";

const steps = [
  { title: "Build", status: "done" },
  { title: "Run checks", status: "done" },
  { title: "Deploy", status: "running", detail: "Uploading 42 files" },
  { title: "Go live", status: "pending" },
] as const;

export default function TimelineBasicPreview() {
  return (
    <Timeline aria-label="Deploy status" className="w-full max-w-compact">
      {steps.map((step) => (
        <TimelineItem key={step.title} status={step.status}>
          <TimelineIndicator />
          <TimelineContent>
            <TimelineTitle>{step.title}</TimelineTitle>
            {"detail" in step && (
              <TimelineDescription>{step.detail}</TimelineDescription>
            )}
          </TimelineContent>
        </TimelineItem>
      ))}
    </Timeline>
  );
}

Timeline

Installation

Source

Usage

Used in blocks

Usage

Used in blocks