Data Display

Timeline

Vertical activity feed with dots, connectors, timestamps and descriptions.

Import

tsx

import { Timeline, TimelineItem, TimelineDot, TimelineContent, TimelineTitle, TimelineTime, TimelineDescription } from "@cooud-ui/ui";

bash

npx cooud-ui add timeline

Examples

Activity

A vertical history feed. Each item pairs a tone- or icon-bearing dot on the rail with a title, timestamp and description; the connecting line is drawn automatically and stops at the last event.

Order placed
Jun 21 · 09:24
Order #4827 created for 3 items.
Payment confirmed
Jun 21 · 09:25
R$ 248,90 captured on the card ending 4242.
Packed
Jun 22 · 14:02
Left the warehouse with the carrier.
Out for delivery
Jun 23 · 08:10
Arriving today between 9am and 1pm.

tsx

<Timeline className="max-w-md">
  <TimelineItem>
    <TimelineDot tone="primary" icon={<CreditCard aria-hidden="true" />} />
    <TimelineContent>
      <TimelineTitle>Order placed</TimelineTitle>
      <TimelineTime dateTime="2026-06-21T09:24">Jun 21 · 09:24</TimelineTime>
      <TimelineDescription>Order #4827 created for 3 items.</TimelineDescription>
    </TimelineContent>
  </TimelineItem>
  <TimelineItem>
    <TimelineDot tone="success" icon={<CheckCircle2 aria-hidden="true" />} />
    <TimelineContent>
      <TimelineTitle>Payment confirmed</TimelineTitle>
      <TimelineTime dateTime="2026-06-21T09:25">Jun 21 · 09:25</TimelineTime>
      <TimelineDescription>R$ 248,90 captured on the card ending 4242.</TimelineDescription>
    </TimelineContent>
  </TimelineItem>
  <TimelineItem>
    <TimelineDot icon={<Package aria-hidden="true" />} />
    <TimelineContent>
      <TimelineTitle>Packed</TimelineTitle>
      <TimelineTime dateTime="2026-06-22T14:02">Jun 22 · 14:02</TimelineTime>
      <TimelineDescription>Left the warehouse with the carrier.</TimelineDescription>
    </TimelineContent>
  </TimelineItem>
  <TimelineItem>
    <TimelineDot icon={<Truck aria-hidden="true" />} />
    <TimelineContent>
      <TimelineTitle>Out for delivery</TimelineTitle>
      <TimelineTime dateTime="2026-06-23T08:10">Jun 23 · 08:10</TimelineTime>
      <TimelineDescription>Arriving today between 9am and 1pm.</TimelineDescription>
    </TimelineContent>
  </TimelineItem>
</Timeline>

API Reference

Generated from the component's exported types.

TimelineItemProps

Extends LiHTMLAttributes<HTMLLIElement>

Prop	Type	Default	Description
`connector`	`boolean`	`true`	Render the trailing connector line below this item's dot. Defaults to `true`; the rail draws a line down to the next event. Set `false` on the final item so the rail stops at its dot (auto-detected when the item is the last child of a , so this is rarely needed by hand).

TimelineDotProps

Extends Omit<HTMLAttributes<HTMLSpanElement>, "color">, Omit<VariantProps<typeof timelineDotVariants>, "withIcon">

Prop	Type	Default	Description
`icon`	`ReactNode`	—	Optional glyph (e.g. a `lucide-react` icon) rendered inside the dot. When present the dot becomes a ring-bordered chip sized to hold it; otherwise it is a small solid disc.