# Timeline

> Vertical activity timeline with toned icons that stagger in.

Component · Free · https://lodeui.com/components/timeline

## When to use

- Activity feeds, audit trails, incident updates and order history.

## When not to use

- Steps people must complete: use a stepper.

## Installation

```bash
npx shadcn@latest add https://lodeui.com/r/timeline.json
```

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { Timeline } from "@/components/ui/timeline";

export function Activity() {
  return <Timeline items={[{ id: "1", title: "Deployed v2.4", time: "2m ago", tone: "success" }, { id: "2", title: "Build started", time: "6m ago" }]} />;
}
```

## API reference

### Timeline

A vertical list of events with tone-colored markers.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| items | `{ id; title; description?; time; icon?; tone? }[]` | – | tone: default, success, warning, danger or info. |

## Accessibility

- An ordered list; markers are decorative and the title carries the meaning.

## Motion

- Items stagger in on mount.

## Responsive behavior

- Single column; time sits under the title on narrow screens.

## Performance

- Paginate long histories.

## Notes for AI

- Newest first is the usual order for activity feeds.

## Related

- [Log viewer](https://lodeui.com/components/log-viewer) — Live log stream with level filters, search and follow mode.
- [Badge](https://lodeui.com/components/badge) — Tone badges and status dots for states like paid, pending, live and degraded.