---
title: "Timeline"
description: "An ordered list of steps with pending, running, done and failed markers joined by a line, for deploys, agent runs and order tracking."
plan: Free
docs: https://ui.edbn.me/docs/components/timeline
---

# Timeline

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

## Installation

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

## Dependencies
- npm: lucide-react@^1.33.0
- edbn: edbn-base, spinner

## Usage

```tsx examples/timeline-basic.tsx
"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>
  );
}
```

## Files
- components/ui/timeline.tsx (167 lines)

## For agents
- Base theme, once per project: npx shadcn@4.19.0 add https://ui.edbn.me/r/edbn-base.json
- MCP server with search, items, examples and source: https://ui.edbn.me/mcp
- Every page and item: https://ui.edbn.me/llms.txt