A vertical list of chronological events with dot markers and connector lines.

Timeline provides the chrome — the marker, the connector line, and the timestamp. You own the content of each event via the :item slot.

Examples

<.timeline>
  <:marker :let={item}>
    <span class="timeline-marker-icon">
      <span class="size-2 rounded-full bg-primary animate-pulse"></span>
    </span>
  </:marker>

  <:item time="2 hours ago">
    <h4>Deployed v2.4</h4>
    <p>Pushed to production, all checks green.</p>
  </:item>

  <:item time="Yesterday" icon="📝">
    <h4>Draft saved</h4>
  </:item>
</.timeline>

Slot Attributes

The :item slot accepts:

• time - Timestamp shown above the item content.
• icon - Text or emoji shown in the marker. Falls back to a dot.
• class - Additional CSS classes for this item.

Slots

• :item - Timeline entry content.
• :marker - Optional custom marker. Receives the current :item slot attrs as the slot argument.

Accessibility

• Uses an ordered list (<ol>) to convey sequence.
• The marker and connector line are decorative (aria-hidden="true").
• The timestamp uses a semantic <time> element.