Timeline

Vertical and horizontal timelines with markers, content cards, and activity feed variants.

Basic Timeline

Order Placed

Jan 15, 2025

Your order #1234 has been confirmed.

Shipped

Jan 17, 2025

Package has been dispatched via express shipping.

Delivered

Pending

Estimated delivery: Jan 20, 2025

<div class="timeline">
  <div class="timeline-item">
    <div class="timeline-marker timeline-marker-dot"></div>
    <div class="timeline-content">
      <div class="timeline-header">
        <h4 class="timeline-title">Order Placed</h4>
        <span class="timeline-time">Jan 15, 2025</span>
      </div>
      <div class="timeline-body">
        <p>Your order #1234 has been confirmed.</p>
      </div>
    </div>
  </div>
  <div class="timeline-item">
    <div class="timeline-marker timeline-marker-dot"></div>
    <div class="timeline-content">
      <div class="timeline-header">
        <h4 class="timeline-title">Shipped</h4>
        <span class="timeline-time">Jan 17, 2025</span>
      </div>
      <div class="timeline-body">
        <p>Package has been dispatched via express shipping.</p>
      </div>
    </div>
  </div>
  <div class="timeline-item">
    <div class="timeline-marker"></div>
    <div class="timeline-content">
      <div class="timeline-header">
        <h4 class="timeline-title">Delivered</h4>
        <span class="timeline-time">Pending</span>
      </div>
      <div class="timeline-body">
        <p>Estimated delivery: Jan 20, 2025</p>
      </div>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="relative pl-8">
  <!-- Vertical line -->
  <!-- Use ::before pseudo-element: absolute left-[11px] top-0 bottom-0 w-0.5 bg-base-300 -->
  <div class="relative pb-6">
    <div class="absolute -left-8 top-0 w-3 h-3 rounded-full bg-primary z-1" style="left: calc(-2rem + 6px)"></div>
    <div class="bg-base-100 border border-base-200 rounded-box p-4">
      <div class="flex items-start justify-between gap-2 mb-1">
        <h4 class="text-base font-semibold m-0">Order Placed</h4>
        <span class="text-xs text-base-content/50 whitespace-nowrap">Jan 15, 2025</span>
      </div>
      <p class="text-sm text-base-content/70 mt-2 m-0">Your order #1234 has been confirmed.</p>
    </div>
  </div>
  <!-- ... more items -->
</div>

Requires: tw.min.css

// No JavaScript required — pure CSS timeline

Simple (No Cards)

v2.0 Released

March 2025

Beta Testing

February 2025

Development Started

January 2025

<div class="timeline timeline-simple">
  <div class="timeline-item">
    <div class="timeline-marker color-success"></div>
    <div class="timeline-content">
      <h4 class="timeline-title">v2.0 Released</h4>
      <span class="timeline-time">March 2025</span>
    </div>
  </div>
  <div class="timeline-item">
    <div class="timeline-marker color-primary"></div>
    <div class="timeline-content">
      <h4 class="timeline-title">Beta Testing</h4>
      <span class="timeline-time">February 2025</span>
    </div>
  </div>
  <div class="timeline-item">
    <div class="timeline-marker color-warning"></div>
    <div class="timeline-content">
      <h4 class="timeline-title">Development Started</h4>
      <span class="timeline-time">January 2025</span>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="relative pl-8 before:content-[''] before:absolute before:top-0 before:bottom-0 before:left-2.75 before:w-0.5 before:bg-base-300">
  <div class="relative pb-6">
    <div class="absolute top-0 size-4 rounded-full bg-success border-none z-1" style="left: calc(-2rem + 4px)"></div>
    <div class="pl-2">
      <h4 class="text-base font-semibold text-base-content m-0">v2.0 Released</h4>
      <span class="text-xs text-base-content/50">March 2025</span>
    </div>
  </div>
  <div class="relative pb-6">
    <div class="absolute top-0 size-4 rounded-full bg-primary border-none z-1" style="left: calc(-2rem + 4px)"></div>
    <div class="pl-2">
      <h4 class="text-base font-semibold text-base-content m-0">Beta Testing</h4>
      <span class="text-xs text-base-content/50">February 2025</span>
    </div>
  </div>
  <div class="relative">
    <div class="absolute top-0 size-4 rounded-full bg-warning border-none z-1" style="left: calc(-2rem + 4px)"></div>
    <div class="pl-2">
      <h4 class="text-base font-semibold text-base-content m-0">Development Started</h4>
      <span class="text-xs text-base-content/50">January 2025</span>
    </div>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required

Activity Feed

Alice created a new project

2 hours ago

Bob updated the design specs

4 hours ago

Carol completed task #42

Yesterday

<div class="timeline timeline-activity">
  <div class="timeline-item">
    <div class="timeline-marker">
      <svg xmlns="http://www.w3.org/2000/svg" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg>
    </div>
    <div class="timeline-content">
      <h4 class="timeline-title"><strong>Alice</strong> created a new project</h4>
      <span class="timeline-time">2 hours ago</span>
    </div>
  </div>
  <div class="timeline-item">
    <div class="timeline-marker">
      <svg xmlns="http://www.w3.org/2000/svg" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/></svg>
    </div>
    <div class="timeline-content">
      <h4 class="timeline-title"><strong>Bob</strong> updated the design specs</h4>
      <span class="timeline-time">4 hours ago</span>
    </div>
  </div>
  <div class="timeline-item">
    <div class="timeline-marker">
      <svg xmlns="http://www.w3.org/2000/svg" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="m9 11 3 3L22 4"/></svg>
    </div>
    <div class="timeline-content">
      <h4 class="timeline-title"><strong>Carol</strong> completed task #42</h4>
      <span class="timeline-time">Yesterday</span>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="relative pl-10 before:content-[''] before:absolute before:top-0 before:bottom-0 before:left-3.75 before:w-0.5 before:bg-base-300">
  <div class="relative pb-6">
    <div class="absolute top-0 size-8 rounded-full bg-base-200 flex items-center justify-center z-1" style="left: calc(-2.5rem + 4px)">
      <svg xmlns="http://www.w3.org/2000/svg" class="size-4 text-base-content/60" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg>
    </div>
    <div>
      <h4 class="text-sm font-normal text-base-content m-0"><strong class="font-semibold">Alice</strong> created a new project</h4>
      <span class="text-xs text-base-content/50 block mt-0.5">2 hours ago</span>
    </div>
  </div>
  <div class="relative pb-6">
    <div class="absolute top-0 size-8 rounded-full bg-base-200 flex items-center justify-center z-1" style="left: calc(-2.5rem + 4px)">
      <svg xmlns="http://www.w3.org/2000/svg" class="size-4 text-base-content/60" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/></svg>
    </div>
    <div>
      <h4 class="text-sm font-normal text-base-content m-0"><strong class="font-semibold">Bob</strong> updated the design specs</h4>
      <span class="text-xs text-base-content/50 block mt-0.5">4 hours ago</span>
    </div>
  </div>
  <div class="relative">
    <div class="absolute top-0 size-8 rounded-full bg-base-200 flex items-center justify-center z-1" style="left: calc(-2.5rem + 4px)">
      <svg xmlns="http://www.w3.org/2000/svg" class="size-4 text-base-content/60" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="m9 11 3 3L22 4"/></svg>
    </div>
    <div>
      <h4 class="text-sm font-normal text-base-content m-0"><strong class="font-semibold">Carol</strong> completed task #42</h4>
      <span class="text-xs text-base-content/50 block mt-0.5">Yesterday</span>
    </div>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required

With Icon Markers & Active State

Step 1: Complete

This step is done.

Step 2: In Progress

Currently working on this.

<div class="timeline">
  <div class="timeline-item timeline-item-active">
    <div class="timeline-marker timeline-marker-icon">
      <svg xmlns="http://www.w3.org/2000/svg" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="m9 11 3 3L22 4"/></svg>
    </div>
    <div class="timeline-content">
      <h4 class="timeline-title">Step 1: Complete</h4>
      <div class="timeline-body"><p>This step is done.</p></div>
    </div>
  </div>
  <div class="timeline-item">
    <div class="timeline-marker timeline-marker-icon">
      <svg xmlns="http://www.w3.org/2000/svg" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
    </div>
    <div class="timeline-content">
      <h4 class="timeline-title">Step 2: In Progress</h4>
      <div class="timeline-body"><p>Currently working on this.</p></div>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="relative pl-8 before:content-[''] before:absolute before:top-0 before:bottom-0 before:left-2.75 before:w-0.5 before:bg-base-300">
  <div class="relative pb-6">
    <div class="absolute top-0 size-8 rounded-full bg-primary text-primary-content flex items-center justify-center z-1" style="left: calc(-2rem - 4px)">
      <svg xmlns="http://www.w3.org/2000/svg" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="m9 11 3 3L22 4"/></svg>
    </div>
    <div class="border border-primary rounded-box p-4" style="background-color: color-mix(in oklch, var(--color-primary) 5%, transparent)">
      <h4 class="text-base font-semibold text-base-content m-0">Step 1: Complete</h4>
      <p class="text-sm text-base-content/70 mt-2 m-0">This step is done.</p>
    </div>
  </div>
  <div class="relative">
    <div class="absolute top-0 size-8 rounded-full bg-primary text-primary-content flex items-center justify-center z-1" style="left: calc(-2rem - 4px)">
      <svg xmlns="http://www.w3.org/2000/svg" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
    </div>
    <div class="bg-base-100 border border-base-200 rounded-box p-4">
      <h4 class="text-base font-semibold text-base-content m-0">Step 2: In Progress</h4>
      <p class="text-sm text-base-content/70 mt-2 m-0">Currently working on this.</p>
    </div>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required

Classes Reference

Class	Description
.timeline	Vertical timeline container
.timeline-item	Individual timeline entry
.timeline-marker	Circle marker on the line (16px)
.timeline-marker-dot	Filled dot marker (12px)
.timeline-marker-icon	Large icon marker (32px)
.timeline-content	Content card
.timeline-header	Header row (title + time)
.timeline-title	Entry title
.timeline-time	Timestamp
.timeline-body	Body text
.timeline-footer	Footer with border-top
.timeline-simple	No card background
.timeline-compact	Reduced spacing
.timeline-activity	Activity feed style
.timeline-horizontal	Horizontal layout (scrollable)
.timeline-alternating	Zigzag left/right layout
.timeline-item-active	Active item (primary accent)
.color-*	Marker colors (on .timeline-marker)
.glass	Glass variant (on .timeline-content)