Timeline — Veritheme

Default

Vertical timeline with dots connected by a line and event details.

html

Order placed

Your order has been successfully placed

2 hours ago

Payment confirmed

Payment has been processed and confirmed

1 hour ago

Shipped

Package has been handed to the carrier

30 min ago

Out for delivery

Your package is on its way to you

5 min ago

<div class="vt-flex vt-gap-4">
  <div class="vt-flex vt-flex-col vt-items-center">
    <div class="vt-timeline-dot vt-mt-1"></div>
    <div class="vt-w-0.5 vt-flex-1 vt-bg-border-default"></div>
  </div>
  <div>Event title</div>
</div>

With Icons

Timeline with icon circles instead of simple dots for each event.

html

Order placed

Your order has been successfully placed

2 hours ago

Payment confirmed

Payment has been processed and confirmed

1 hour ago

Shipped

Package has been handed to the carrier

30 min ago

Out for delivery

Your package is on its way to you

5 min ago

<div class="vt-flex vt-gap-4">
  <div class="vt-flex vt-flex-col vt-items-center">
    <div class="vt-w-8 vt-h-8 vt-rounded-full vt-bg-info-primary/10 vt-flex vt-items-center vt-justify-center">
      <svg>...</svg>
    </div>
    <div class="vt-w-0.5 vt-flex-1 vt-bg-border-default"></div>
  </div>
  <div>
    <p class="vt-text-sm vt-font-medium">Order placed</p>
    <p class="vt-text-sm vt-text-mains-quaternary">...</p>
  </div>
</div>

Alternating

Timeline with events alternating between left and right sides of the center line.

html

Order placed

Your order has been successfully placed

2 hours ago

Payment confirmed

Payment has been processed and confirmed

1 hour ago

Shipped

Package has been handed to the carrier

30 min ago

Out for delivery

Your package is on its way to you

5 min ago

<div class="vt-relative">
  <div class="vt-absolute vt-left-1/2 vt-w-0.5 vt-bg-border-default"></div>
  <div class="vt-flex vt-items-start">
    <div class="vt-w-1/2 vt-pr-8 vt-text-right">
      <p class="vt-text-sm vt-font-medium">Order placed</p>
    </div>
    <div class="vt-absolute vt-left-1/2 vt-timeline-dot vt-mt-1"></div>
    <div class="vt-w-1/2 vt-pl-8"></div>
  </div>
</div>

With Cards

Timeline where each event is displayed inside a bordered card with optional actions.

html

Order placed

Your order #12345 has been successfully placed and is being processed.

View order details

2 hours ago

Payment confirmed

Payment of $49.99 has been processed via credit card ending in 4242.

View receipt

1 hour ago

Shipped

Package has been handed to the carrier. Tracking number: 1Z999AA10123456784.

Track package

30 min ago

Out for delivery

Your package is on a delivery vehicle and will arrive today.

5 min ago

<div class="vt-flex vt-gap-4">
  <div class="vt-flex vt-flex-col vt-items-center">
    <div class="vt-timeline-dot vt-mt-5"></div>
    <div class="vt-w-0.5 vt-flex-1 vt-bg-border-default"></div>
  </div>
  <div class="vt-flex-1">
    <div class="vt-rounded-2xl vt-border vt-border-border-default vt-p-4">
      <p class="vt-text-sm vt-font-medium">Order placed</p>
      <p class="vt-text-sm vt-text-mains-quaternary">Your order has been placed...</p>
    </div>
  </div>
</div>

Status Colors

Timeline with different status colors indicating completed, current, and upcoming events.

html

Order placed

Your order has been successfully placed

2 hours ago

Payment confirmed

Payment has been processed and confirmed

1 hour ago

Shipped

Package has been handed to the carrier

30 min ago

Out for delivery

Your package is on its way to you

Pending

<div class="vt-flex vt-gap-4">
  <div class="vt-flex vt-flex-col vt-items-center">
    <div class="vt-timeline-dot vt-mt-1"></div>
    <div class="vt-w-0.5 vt-flex-1 vt-bg-info-primary"></div>
  </div>
  <div>
    <p class="vt-text-sm vt-font-medium">Completed event</p>
  </div>
</div>
<div class="vt-flex vt-gap-4">
  <div class="vt-flex vt-flex-col vt-items-center">
    <div class="vt-timeline-dot vt-ring-4 vt-ring-info/20 vt-mt-1"></div>
    <div class="vt-w-0.5 vt-flex-1 vt-bg-border-default"></div>
  </div>
  <div>
    <p class="vt-text-sm vt-font-medium">Current event</p>
  </div>
</div>

API Reference

All CSS classes available for the Timeline component.

Class	Type	Description
`vt-flex vt-gap-4`	Layout	Horizontal layout for timeline row (indicator + content)
`vt-flex-col vt-items-center`	Layout	Vertical column for dot and connector line
`vt-timeline-dot`	Style	Small circle dot indicator (w-3, h-3, rounded-full, bg-info-primary, shrink-0)
`vt-w-0.5 vt-flex-1 vt-bg-border-default`	Style	Vertical connector line between events
`vt-bg-info-primary`	Color	Blue dot and completed connector color
`vt-bg-surfaces-moderate`	Color	Muted dot for upcoming/pending events
`vt-ring-4 vt-ring-info/20`	State	Glow ring highlighting the current step
`vt-w-8 vt-h-8 vt-bg-info-primary/10`	Variant	Larger icon circle for icon variant
`vt-rounded-2xl vt-border vt-border-border-default`	Variant	Card style for card timeline variant
`vt-text-mains-quaternary`	Color	Subdued color for timestamps and descriptions

Accessibility

Keyboard and screen reader support.

Feature	Details
Semantics	Use ordered list (ol) for chronological events, unordered (ul) otherwise
Time	Use time element with datetime attribute for machine-readable dates
Status	Completed/active step states should be conveyed via text, not just icons