Timeline

A visual representation of events in chronological order.

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="uc-flex uc-gap-4">
  <div class="uc-flex uc-flex-col uc-items-center">
    <div class="uc-w-3 uc-h-3 uc-rounded-full uc-bg-accents-blue"></div>
    <div class="uc-w-0.5 uc-flex-1 uc-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="uc-flex uc-gap-4">
  <div class="uc-flex uc-flex-col uc-items-center">
    <div class="uc-w-8 uc-h-8 uc-rounded-full uc-bg-accents-blue/10 uc-flex uc-items-center uc-justify-center">
      <svg>...</svg>
    </div>
    <div class="uc-w-0.5 uc-flex-1 uc-bg-border-default"></div>
  </div>
  <div>
    <p class="uc-text-sm uc-font-medium">Order placed</p>
    <p class="uc-text-sm uc-text-fg-disabled">...</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="uc-relative">
  <div class="uc-absolute uc-left-1/2 uc-w-0.5 uc-bg-border-default"></div>
  <div class="uc-flex uc-items-start">
    <div class="uc-w-1/2 uc-pr-8 uc-text-right">
      <p class="uc-text-sm uc-font-medium">Order placed</p>
    </div>
    <div class="uc-absolute uc-left-1/2 uc-w-3 uc-h-3 uc-rounded-full uc-bg-accents-blue"></div>
    <div class="uc-w-1/2 uc-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="uc-flex uc-gap-4">
  <div class="uc-flex uc-flex-col uc-items-center">
    <div class="uc-w-3 uc-h-3 uc-rounded-full uc-bg-accents-blue"></div>
    <div class="uc-w-0.5 uc-flex-1 uc-bg-border-default"></div>
  </div>
  <div class="uc-flex-1">
    <div class="uc-rounded-2xl uc-border uc-border-border-default uc-p-4">
      <p class="uc-text-sm uc-font-medium">Order placed</p>
      <p class="uc-text-sm uc-text-fg-disabled">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="uc-flex uc-gap-4">
  <div class="uc-flex uc-flex-col uc-items-center">
    <div class="uc-w-3 uc-h-3 uc-rounded-full uc-bg-accents-blue"></div>
    <div class="uc-w-0.5 uc-flex-1 uc-bg-accents-blue"></div>
  </div>
  <div>
    <p class="uc-text-sm uc-font-medium">Completed event</p>
  </div>
</div>
<div class="uc-flex uc-gap-4">
  <div class="uc-flex uc-flex-col uc-items-center">
    <div class="uc-w-3 uc-h-3 uc-rounded-full uc-bg-accents-blue uc-ring-4 uc-ring-info/20"></div>
    <div class="uc-w-0.5 uc-flex-1 uc-bg-border-default"></div>
  </div>
  <div>
    <p class="uc-text-sm uc-font-medium">Current event</p>
  </div>
</div>

API Reference

All CSS classes available for the Timeline component.

Class Type Description
uc-flex uc-gap-4 Layout Horizontal layout for timeline row (indicator + content)
uc-flex-col uc-items-center Layout Vertical column for dot and connector line
uc-w-3 uc-h-3 uc-rounded-full Style Small circle dot indicator
uc-w-0.5 uc-flex-1 uc-bg-border-default Style Vertical connector line between events
uc-bg-accents-blue Color Blue dot and completed connector color
uc-bg-neutrals-muted Color Muted dot for upcoming/pending events
uc-ring-4 uc-ring-info/20 State Glow ring highlighting the current step
uc-w-8 uc-h-8 uc-bg-accents-blue/10 Variant Larger icon circle for icon variant
uc-rounded-2xl uc-border uc-border-border-default Variant Card style for card timeline variant
uc-text-fg-disabled 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