v1.1.1

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="vt-max-w-md vt-mx-auto">
  <!-- Event 1 -->
  <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 vt-my-1"></div>
    </div>
    <div class="vt-pb-8">
      <p class="vt-text-sm vt-font-medium">Order placed</p>
      <p class="vt-text-sm vt-text-foreground-muted vt-mt-0.5">Your order has been successfully placed</p>
      <p class="vt-text-xs vt-text-foreground-muted vt-mt-1">2 hours ago</p>
    </div>
  </div>
  <!-- Event 2 -->
  <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 vt-my-1"></div>
    </div>
    <div class="vt-pb-8">
      <p class="vt-text-sm vt-font-medium">Payment confirmed</p>
      <p class="vt-text-sm vt-text-foreground-muted vt-mt-0.5">Payment has been processed and confirmed</p>
      <p class="vt-text-xs vt-text-foreground-muted vt-mt-1">1 hour ago</p>
    </div>
  </div>
  <!-- Event 3 -->
  <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 vt-my-1"></div>
    </div>
    <div class="vt-pb-8">
      <p class="vt-text-sm vt-font-medium">Shipped</p>
      <p class="vt-text-sm vt-text-foreground-muted vt-mt-0.5">Package has been handed to the carrier</p>
      <p class="vt-text-xs vt-text-foreground-muted vt-mt-1">30 min ago</p>
    </div>
  </div>
  <!-- Event 4 -->
  <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>
    <div>
      <p class="vt-text-sm vt-font-medium">Out for delivery</p>
      <p class="vt-text-sm vt-text-foreground-muted vt-mt-0.5">Your package is on its way to you</p>
      <p class="vt-text-xs vt-text-foreground-muted vt-mt-1">5 min ago</p>
    </div>
  </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-max-w-md vt-mx-auto">
  <!-- Event 1: Package -->
  <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-brand-fill/10 vt-flex vt-items-center vt-justify-center vt-shrink-0">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-package vt-w-4 vt-h-4 vt-text-brand-fill">
          <path d="M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z"></path><path d="M12 22V12"></path><polyline points="3.29 7 12 12 20.71 7"></polyline><path d="m7.5 4.27 9 5.15"></path>
        </svg>
      </div>
      <div class="vt-w-0.5 vt-flex-1 vt-bg-border-default vt-my-1"></div>
    </div>
    <div class="vt-pb-8">
      <p class="vt-text-sm vt-font-medium">Order placed</p>
      <p class="vt-text-sm vt-text-foreground-muted vt-mt-0.5">Your order has been successfully placed</p>
      <p class="vt-text-xs vt-text-foreground-muted vt-mt-1">2 hours ago</p>
    </div>
  </div>
  <!-- Event 2: Check -->
  <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-brand-fill/10 vt-flex vt-items-center vt-justify-center vt-shrink-0">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-check vt-w-4 vt-h-4 vt-text-brand-fill">
          <path d="M20 6 9 17l-5-5"></path>
        </svg>
      </div>
      <div class="vt-w-0.5 vt-flex-1 vt-bg-border-default vt-my-1"></div>
    </div>
    <div class="vt-pb-8">
      <p class="vt-text-sm vt-font-medium">Payment confirmed</p>
      <p class="vt-text-sm vt-text-foreground-muted vt-mt-0.5">Payment has been processed and confirmed</p>
      <p class="vt-text-xs vt-text-foreground-muted vt-mt-1">1 hour ago</p>
    </div>
  </div>
  <!-- Event 3: Truck -->
  <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-brand-fill/10 vt-flex vt-items-center vt-justify-center vt-shrink-0">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-truck vt-w-4 vt-h-4 vt-text-brand-fill">
          <path d="M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2"></path><path d="M15 18H9"></path><path d="M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14"></path><circle cx="17" cy="18" r="2"></circle><circle cx="7" cy="18" r="2"></circle>
        </svg>
      </div>
      <div class="vt-w-0.5 vt-flex-1 vt-bg-border-default vt-my-1"></div>
    </div>
    <div class="vt-pb-8">
      <p class="vt-text-sm vt-font-medium">Shipped</p>
      <p class="vt-text-sm vt-text-foreground-muted vt-mt-0.5">Package has been handed to the carrier</p>
      <p class="vt-text-xs vt-text-foreground-muted vt-mt-1">30 min ago</p>
    </div>
  </div>
  <!-- Event 4: Home -->
  <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-brand-fill/10 vt-flex vt-items-center vt-justify-center vt-shrink-0">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-house vt-w-4 vt-h-4 vt-text-brand-fill">
          <path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"></path><path d="M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
        </svg>
      </div>
    </div>
    <div>
      <p class="vt-text-sm vt-font-medium">Out for delivery</p>
      <p class="vt-text-sm vt-text-foreground-muted vt-mt-0.5">Your package is on its way to you</p>
      <p class="vt-text-xs vt-text-foreground-muted vt-mt-1">5 min ago</p>
    </div>
  </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 vt-max-w-2xl vt-mx-auto">
  <!-- Center line -->
  <div class="vt-absolute vt-left-1/2 vt-top-0 vt-bottom-0 vt-w-0.5 vt-bg-border-default vt--translate-x-1/2"></div>

  <!-- Event 1: Left -->
  <div class="vt-relative vt-flex vt-items-start vt-mb-8">
    <div class="vt-w-1/2 vt-pr-8 vt-text-right">
      <p class="vt-text-sm vt-font-medium">Order placed</p>
      <p class="vt-text-sm vt-text-foreground-muted vt-mt-0.5">Your order has been successfully placed</p>
      <p class="vt-text-xs vt-text-foreground-muted vt-mt-1">2 hours ago</p>
    </div>
    <div class="vt-absolute vt-left-1/2 vt--translate-x-1/2 vt-timeline-dot vt-mt-1 vt-z-10"></div>
    <div class="vt-w-1/2 vt-pl-8"></div>
  </div>

  <!-- Event 2: Right -->
  <div class="vt-relative vt-flex vt-items-start vt-mb-8">
    <div class="vt-w-1/2 vt-pr-8"></div>
    <div class="vt-absolute vt-left-1/2 vt--translate-x-1/2 vt-timeline-dot vt-mt-1 vt-z-10"></div>
    <div class="vt-w-1/2 vt-pl-8">
      <p class="vt-text-sm vt-font-medium">Payment confirmed</p>
      <p class="vt-text-sm vt-text-foreground-muted vt-mt-0.5">Payment has been processed and confirmed</p>
      <p class="vt-text-xs vt-text-foreground-muted vt-mt-1">1 hour ago</p>
    </div>
  </div>

  <!-- Event 3: Left -->
  <div class="vt-relative vt-flex vt-items-start vt-mb-8">
    <div class="vt-w-1/2 vt-pr-8 vt-text-right">
      <p class="vt-text-sm vt-font-medium">Shipped</p>
      <p class="vt-text-sm vt-text-foreground-muted vt-mt-0.5">Package has been handed to the carrier</p>
      <p class="vt-text-xs vt-text-foreground-muted vt-mt-1">30 min ago</p>
    </div>
    <div class="vt-absolute vt-left-1/2 vt--translate-x-1/2 vt-timeline-dot vt-mt-1 vt-z-10"></div>
    <div class="vt-w-1/2 vt-pl-8"></div>
  </div>

  <!-- Event 4: Right -->
  <div class="vt-relative vt-flex vt-items-start">
    <div class="vt-w-1/2 vt-pr-8"></div>
    <div class="vt-absolute vt-left-1/2 vt--translate-x-1/2 vt-timeline-dot vt-mt-1 vt-z-10"></div>
    <div class="vt-w-1/2 vt-pl-8">
      <p class="vt-text-sm vt-font-medium">Out for delivery</p>
      <p class="vt-text-sm vt-text-foreground-muted vt-mt-0.5">Your package is on its way to you</p>
      <p class="vt-text-xs vt-text-foreground-muted vt-mt-1">5 min ago</p>
    </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-max-w-md vt-mx-auto">
  <!-- Event 1 -->
  <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 vt-my-1"></div>
    </div>
    <div class="vt-pb-6 vt-flex-1">
      <div class="vt-card vt-p-4">
        <p class="vt-text-sm vt-font-medium">Order placed</p>
        <p class="vt-text-sm vt-text-foreground-muted vt-mt-1">Your order #12345 has been successfully placed and is being processed.</p>
        <a href="#" class="vt-text-sm vt-text-brand-fill vt-mt-2 vt-inline-block">View order details</a>
      </div>
      <p class="vt-text-xs vt-text-foreground-muted vt-mt-2">2 hours ago</p>
    </div>
  </div>
  <!-- Event 2 -->
  <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 vt-my-1"></div>
    </div>
    <div class="vt-pb-6 vt-flex-1">
      <div class="vt-card vt-p-4">
        <p class="vt-text-sm vt-font-medium">Payment confirmed</p>
        <p class="vt-text-sm vt-text-foreground-muted vt-mt-1">Payment of $49.99 has been processed via credit card ending in 4242.</p>
        <a href="#" class="vt-text-sm vt-text-brand-fill vt-mt-2 vt-inline-block">View receipt</a>
      </div>
      <p class="vt-text-xs vt-text-foreground-muted vt-mt-2">1 hour ago</p>
    </div>
  </div>
  <!-- Event 3 -->
  <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 vt-my-1"></div>
    </div>
    <div class="vt-pb-6 vt-flex-1">
      <div class="vt-card vt-p-4">
        <p class="vt-text-sm vt-font-medium">Shipped</p>
        <p class="vt-text-sm vt-text-foreground-muted vt-mt-1">Package has been handed to the carrier. Tracking number: 1Z999AA10123456784.</p>
        <a href="#" class="vt-text-sm vt-text-brand-fill vt-mt-2 vt-inline-block">Track package</a>
      </div>
      <p class="vt-text-xs vt-text-foreground-muted vt-mt-2">30 min ago</p>
    </div>
  </div>
  <!-- Event 4 -->
  <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>
    <div class="vt-flex-1">
      <div class="vt-card vt-p-4">
        <p class="vt-text-sm vt-font-medium">Out for delivery</p>
        <p class="vt-text-sm vt-text-foreground-muted vt-mt-1">Your package is on a delivery vehicle and will arrive today.</p>
      </div>
      <p class="vt-text-xs vt-text-foreground-muted vt-mt-2">5 min ago</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-max-w-md vt-mx-auto">
  <!-- Event 1: Completed -->
  <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-brand-fill vt-my-1"></div>
    </div>
    <div class="vt-pb-8">
      <p class="vt-text-sm vt-font-medium">Order placed</p>
      <p class="vt-text-sm vt-text-foreground-muted vt-mt-0.5">Your order has been successfully placed</p>
      <p class="vt-text-xs vt-text-foreground-muted vt-mt-1">2 hours ago</p>
    </div>
  </div>
  <!-- Event 2: Completed -->
  <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-brand-fill vt-my-1"></div>
    </div>
    <div class="vt-pb-8">
      <p class="vt-text-sm vt-font-medium">Payment confirmed</p>
      <p class="vt-text-sm vt-text-foreground-muted vt-mt-0.5">Payment has been processed and confirmed</p>
      <p class="vt-text-xs vt-text-foreground-muted vt-mt-1">1 hour ago</p>
    </div>
  </div>
  <!-- Event 3: Current -->
  <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-brand-fill/20 vt-mt-1"></div>
      <div class="vt-w-0.5 vt-flex-1 vt-bg-border-default vt-my-1"></div>
    </div>
    <div class="vt-pb-8">
      <p class="vt-text-sm vt-font-medium">Shipped</p>
      <p class="vt-text-sm vt-text-foreground-muted vt-mt-0.5">Package has been handed to the carrier</p>
      <p class="vt-text-xs vt-text-foreground-muted vt-mt-1">30 min ago</p>
    </div>
  </div>
  <!-- Event 4: Upcoming -->
  <div class="vt-flex vt-gap-4">
    <div class="vt-flex vt-flex-col vt-items-center">
      <div class="vt-timeline-dot vt-bg-surface-moderate vt-mt-1"></div>
    </div>
    <div>
      <p class="vt-text-sm vt-font-medium vt-text-foreground-muted">Out for delivery</p>
      <p class="vt-text-sm vt-text-foreground-muted vt-mt-0.5">Your package is on its way to you</p>
      <p class="vt-text-xs vt-text-foreground-muted vt-mt-1">Pending</p>
    </div>
  </div>
</div>

Guidelines

Show events in chronological order with a clear timestamp on each entry; keep descriptions concise.

Order placed

2 hours ago

Shipped

30 min ago

Do
Give every event a clear, relative timestamp.

Shipped

Order placed

Don't
Don't list events without timestamps or a clear order.

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-brand-fill, shrink-0)
vt-w-0.5 vt-flex-1 vt-bg-border-default Style Vertical connector line between events
vt-bg-brand-fill Color Blue dot and completed connector color
vt-bg-surface-moderate Color Muted dot for upcoming/pending events
vt-ring-4 vt-ring-brand-fill/20 State Glow ring highlighting the current step
vt-w-8 vt-h-8 vt-bg-brand-fill/10 Variant Larger icon circle for icon variant
vt-card Variant Card style for card timeline variant
vt-text-foreground-muted 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
Built with:
Icons Separator