# Timeline (goodtabs UI)

Vertical dated events on one hairline, newest first.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/timeline.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/timeline`

## Usage

```tsx
import { Timeline, TimelineItem } from "@/components/ui/timeline"

<Timeline>
  <TimelineItem title="Registry opened" date="22 Oct" dateTime="2026-10-22" />
</Timeline>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| title | `ReactNode` |  | TimelineItem: what happened. |
| date | `string` |  | TimelineItem: the date as people read it. |
| dateTime | `string` |  | TimelineItem: machine-readable date for the time element. |
| description | `string` |  | TimelineItem: one quiet line of detail. |

## When to use

- Changelogs, project history, order or build history
- A short run of dated events

## When not to use

- Who did what: use activity-feed
- Steps in a flow: use stepper

## Notes for agents

- Pass items in the order to show; it does not sort
- The line stops at the last item
- Renders an ol, so screen readers announce the count

Docs: https://ui.goodtabs.co/components/timeline