Display

Timeline

Server Component

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

Import

tsx

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

bash

npx cronus-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>

.cronus

The same component declared in Cronus. Emitted at build time from the audit fixtures — the kernel renders it as HTML with no React.

PortedParity: MatchGeometry 1/1Pixel diff 0 pxLogic 1/1Parity scoreboard

default.cronus

app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component TimelineDefault layout:inline style:timeline {
  aria-label:"Order history"
  label "Order history"
  text "Order placed"
  text "Order shipped"
}

page "/audit/timeline/default" type:custom {
  use TimelineDefault
}

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).
`children`	`ReactNode`	—	Contents of the component.
`className`	`string`	—	Additional class names merged onto the root.

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.
`asChild`	`boolean`	—	Render as the child element via Slot.
`children`	`ReactNode`	—	Contents of the component.
`className`	`string`	—	Additional class names merged onto the root.
`id`	`string`	—	DOM id of the root element.

TimelineProps

Extends OlHTMLAttributes<HTMLOListElement>

Prop	Type	Default	Description
`children`	`ReactNode`	—	Contents of the component.
`className`	`string`	—	Additional class names merged onto the root.
`start`	`number`	—	—

TimelineConnectorProps

Extends HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
`className`	`string`	—	Additional class names merged onto the root.
`children`	`ReactNode`	—	Contents of the component.
`id`	`string`	—	DOM id of the root element.

TimelineContentProps

Extends HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
`className`	`string`	—	Additional class names merged onto the root.
`children`	`ReactNode`	—	Contents of the component.
`id`	`string`	—	DOM id of the root element.

TimelineTitleProps

Extends HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
`className`	`string`	—	Additional class names merged onto the root.
`children`	`ReactNode`	—	Contents of the component.
`id`	`string`	—	DOM id of the root element.

TimelineTimeProps

Extends TimeHTMLAttributes<HTMLTimeElement>

Prop	Type	Default	Description
`children`	`ReactNode`	—	Contents of the component.
`className`	`string`	—	Additional class names merged onto the root.
`dateTime`	`string`	—	Machine-readable datetime.

TimelineDescriptionProps

Extends HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
`className`	`string`	—	Additional class names merged onto the root.
`children`	`ReactNode`	—	Contents of the component.
`id`	`string`	—	DOM id of the root element.