Timeline

Events in order with dots or icons on a connecting line, in sections with headings.

Today

Invoice 1042 paid
$2,450.00
Raman Physio paid by e-transfer.
2:05 PM
Reminder opened
Northshore Dental opened the reminder for invoice 1039.
9:12 AM

Yesterday

Invoice 1039 overdue
7 days
A reminder went out automatically.
8:00 AM
Quote sent
Website refresh for Fraser Valley Plumbing.
4:40 PM

Oct 2
Project started
Kickoff call and brief signed.
Oct 9
Designs approved
Two rounds of changes.
Oct 16
Build
Pages, forms and the booking flow.
Oct 30
Launch
Domain switch and handover.
Oct 30
Final invoice
Goes out on launch day.

Installation


pnpm dlx shadcn@latest add https://anotherui.dev/r/timeline.json

Usage

import {
  Timeline,
  TimelineContent,
  TimelineDescription,
  TimelineGroup,
  TimelineGroupLabel,
  TimelineHeader,
  TimelineIndicator,
  TimelineItem,
  TimelineList,
  TimelineTime,
  TimelineTitle,
} from "@/components/ui/timeline"

<Timeline>
  <TimelineGroup>
    <TimelineGroupLabel>Today</TimelineGroupLabel>
    <TimelineList>
      <TimelineItem>
        <TimelineIndicator variant="icon" tone="success">
          <CheckIcon weight="bold" />
        </TimelineIndicator>
        <TimelineContent>
          <TimelineHeader>
            <TimelineTitle>Invoice 1042 paid</TimelineTitle>
            <Amount value={2450} tone="positive" />
          </TimelineHeader>
          <TimelineDescription>Paid by e-transfer.</TimelineDescription>
          <TimelineTime dateTime="2026-10-11T14:05">2:05 PM</TimelineTime>
        </TimelineContent>
      </TimelineItem>
    </TimelineList>
  </TimelineGroup>
</Timeline>

TimelineIndicator is the marker. variant="dot" is a small dot, icon is a round badge for an icon, and tile is a rounded square for lists of records, like transactions. tone colours it: primary, success, warning, danger or muted. Use one variant per list so the text lines up.

The line

Each marker draws a line down to the next one, so the line stops at the last item by itself. Turn it off with connector={false} on Timeline. The gap between items is the bottom padding of TimelineContent.

Sections

Wrap each run of items in TimelineGroup with a TimelineGroupLabel heading, like one section per day. Without sections, put the TimelineList straight in the Timeline.

Props

Timeline. connector draws the line, on by default.
TimelineGroup, TimelineGroupLabel. A section and its heading.
TimelineList, TimelineItem. The ordered list and one event.
TimelineIndicator. variant is dot, icon or tile. tone sets the colour.
TimelineContent. Holds the text. TimelineHeader is a row for the title and anything at its far end.
TimelineTime, TimelineTitle, TimelineDescription. Text parts. TimelineTime is a time element, so give it a dateTime.

Time Field Toast

On This Page

Installation Usage Markers The line Sections Props