A vertical timeline composed of three parts: Timeline (wrapper), TimelineItem (row), and TimelineIndicator (dot/icon). The connector line hides automatically on the last item.
Default gray dot indicators with no props required. The connector line between items disappears automatically on the last entry.
Your application has been received.
Our team is reviewing your submission.
Final decision will be made within 3 business days.
<x-ui::timeline>
<x-ui::timeline-item>
<x-ui::heading level="6">Application submitted</x-ui::heading>
<x-ui::text variant="muted">Your application has been received.</x-ui::text>
</x-ui::timeline-item>
<x-ui::timeline-item>
<x-ui::heading level="6">Under review</x-ui::heading>
<x-ui::text variant="muted">Our team is reviewing your submission.</x-ui::text>
</x-ui::timeline-item>
<x-ui::timeline-item>
<x-ui::heading level="6">Decision pending</x-ui::heading>
<x-ui::text variant="muted">Final decision will be made within 3 business days.</x-ui::text>
</x-ui::timeline-item>
</x-ui::timeline>Eight indicator colors: zinc (default), blue, green, yellow, red, purple, lime, and sky.
Zinc
Blue
Green
Yellow
Red
Purple
Lime
Sky
<x-ui::timeline>
<x-ui::timeline-item>
<x-slot:indicator><x-ui::timeline-indicator color="zinc" /></x-slot:indicator>
<x-ui::text>Zinc</x-ui::text>
</x-ui::timeline-item>
<x-ui::timeline-item>
<x-slot:indicator><x-ui::timeline-indicator color="blue" /></x-slot:indicator>
<x-ui::text>Blue</x-ui::text>
</x-ui::timeline-item>
<x-ui::timeline-item>
<x-slot:indicator><x-ui::timeline-indicator color="green" /></x-slot:indicator>
<x-ui::text>Green</x-ui::text>
</x-ui::timeline-item>
...
</x-ui::timeline>Three visual styles — solid (filled), outline (bordered), and ring (filled with outer glow). Works across all colors.
Solid
Blue
Green
Red
Outline
Blue
Green
Red
Ring
Blue
Green
Red
{{-- Solid (default) --}}
<x-ui::timeline-indicator color="blue" variant="solid" />
{{-- Outline --}}
<x-ui::timeline-indicator color="blue" variant="outline" />
{{-- Ring --}}
<x-ui::timeline-indicator color="blue" variant="ring" />Pass an icon prop to the indicator to replace the default dot with a Heroicon. Icons are rendered solid at 16×16.
Welcome aboard.
Your email address has been confirmed.
Your account is now more secure.
Complete your profile to unlock all features.
<x-ui::timeline>
<x-ui::timeline-item>
<x-slot:indicator>
<x-ui::timeline-indicator color="green" icon="check" />
</x-slot:indicator>
<x-ui::heading level="6">Account created</x-ui::heading>
<x-ui::text variant="muted">Welcome aboard.</x-ui::text>
</x-ui::timeline-item>
<x-ui::timeline-item>
<x-slot:indicator>
<x-ui::timeline-indicator color="blue" icon="envelope" />
</x-slot:indicator>
<x-ui::heading level="6">Email verified</x-ui::heading>
<x-ui::text variant="muted">Your email address has been confirmed.</x-ui::text>
</x-ui::timeline-item>
<x-ui::timeline-item>
<x-slot:indicator>
<x-ui::timeline-indicator color="purple" icon="shield-check" />
</x-slot:indicator>
<x-ui::heading level="6">Two-factor enabled</x-ui::heading>
<x-ui::text variant="muted">Your account is now more secure.</x-ui::text>
</x-ui::timeline-item>
<x-ui::timeline-item>
<x-slot:indicator>
<x-ui::timeline-indicator color="zinc" variant="outline" icon="clock" />
</x-slot:indicator>
<x-ui::heading level="6">Profile completion</x-ui::heading>
<x-ui::text variant="muted">Complete your profile to unlock all features.</x-ui::text>
</x-ui::timeline-item>
</x-ui::timeline>The date prop renders a small timestamp above the item's content — ideal for changelogs, audit logs, and version histories.
Major redesign with new component library.
Performance improvements and bug fixes.
Initial public release.
<x-ui::timeline>
<x-ui::timeline-item date="May 7, 2025">
<x-slot:indicator>
<x-ui::timeline-indicator color="blue" variant="ring" icon="star" />
</x-slot:indicator>
<x-ui::heading level="6">v2.0 Released</x-ui::heading>
<x-ui::text variant="muted">Major redesign with new component library.</x-ui::text>
</x-ui::timeline-item>
<x-ui::timeline-item date="March 12, 2025">
<x-slot:indicator>
<x-ui::timeline-indicator color="green" icon="check" />
</x-slot:indicator>
<x-ui::heading level="6">v1.5 Stable</x-ui::heading>
<x-ui::text variant="muted">Performance improvements and bug fixes.</x-ui::text>
</x-ui::timeline-item>
<x-ui::timeline-item date="January 3, 2025">
<x-slot:indicator>
<x-ui::timeline-indicator color="zinc" />
</x-slot:indicator>
<x-ui::heading level="6">v1.0 Launch</x-ui::heading>
<x-ui::text variant="muted">Initial public release.</x-ui::text>
</x-ui::timeline-item>
</x-ui::timeline>A social-style activity feed using avatars as custom indicators via the indicator slot.
Jane Doe commented on Dashboard redesign
"Looks great! The new layout feels much cleaner."
Alex Kim joined the team.
Sam Wong closed issue #42 Navigation bug
New release v1.8.2 was deployed to production.
<x-ui::timeline>
<x-ui::timeline-item date="2 minutes ago">
<x-slot:indicator>
<x-ui::avatar name="Jane Doe" size="sm" />
</x-slot:indicator>
<p class="text-sm">
<span class="font-medium text-zinc-900 dark:text-white">Jane Doe</span>
<span class="text-zinc-500 dark:text-zinc-400"> commented on </span>
<span class="font-medium text-zinc-900 dark:text-white">Dashboard redesign</span>
</p>
<x-ui::text variant="muted" class="mt-1">"Looks great! The new layout feels much cleaner."</x-ui::text>
</x-ui::timeline-item>
<x-ui::timeline-item date="15 minutes ago">
<x-slot:indicator>
<x-ui::timeline-indicator color="green" icon="user-plus" />
</x-slot:indicator>
<p class="text-sm text-zinc-500 dark:text-zinc-400">
<span class="font-medium text-zinc-900 dark:text-white">Alex Kim</span>
joined the team.
</p>
</x-ui::timeline-item>
<x-ui::timeline-item date="1 hour ago">
<x-slot:indicator>
<x-ui::avatar name="Sam Wong" size="sm" />
</x-slot:indicator>
<p class="text-sm">
<span class="font-medium text-zinc-900 dark:text-white">Sam Wong</span>
<span class="text-zinc-500 dark:text-zinc-400"> closed issue </span>
<span class="font-medium text-zinc-900 dark:text-white">#42 Navigation bug</span>
</p>
</x-ui::timeline-item>
<x-ui::timeline-item date="3 hours ago">
<x-slot:indicator>
<x-ui::timeline-indicator color="blue" icon="arrow-up-tray" />
</x-slot:indicator>
<p class="text-sm text-zinc-500 dark:text-zinc-400">
New release <span class="font-medium text-zinc-900 dark:text-white">v1.8.2</span> was deployed to production.
</p>
</x-ui::timeline-item>
</x-ui::timeline>Mixing completed (colored) and pending (outline) indicators to show progress through a multi-step process.
Payment confirmed. Order processing has begun.
Your items have been packed and are ready for pickup.
Your package is on its way. Estimated arrival: May 8.
Pending
Pending
<x-ui::card>
<x-ui::heading level="6" class="mb-6">Order #ORD-2025-0412</x-ui::heading>
<x-ui::timeline>
<x-ui::timeline-item date="May 5 · 9:14 AM">
<x-slot:indicator>
<x-ui::timeline-indicator color="green" variant="ring" icon="check" />
</x-slot:indicator>
<x-ui::heading level="6">Order placed</x-ui::heading>
<x-ui::text variant="muted">Payment confirmed. Order processing has begun.</x-ui::text>
</x-ui::timeline-item>
<x-ui::timeline-item date="May 5 · 3:48 PM">
<x-slot:indicator>
<x-ui::timeline-indicator color="green" variant="ring" icon="check" />
</x-slot:indicator>
<x-ui::heading level="6">Packed</x-ui::heading>
<x-ui::text variant="muted">Your items have been packed and are ready for pickup.</x-ui::text>
</x-ui::timeline-item>
<x-ui::timeline-item date="May 6 · 8:02 AM">
<x-slot:indicator>
<x-ui::timeline-indicator color="blue" variant="ring" icon="truck" />
</x-slot:indicator>
<x-ui::heading level="6">In transit</x-ui::heading>
<x-ui::text variant="muted">Your package is on its way. Estimated arrival: May 8.</x-ui::text>
</x-ui::timeline-item>
<x-ui::timeline-item date="Estimated May 8">
<x-slot:indicator>
<x-ui::timeline-indicator color="zinc" variant="outline" icon="home" />
</x-slot:indicator>
<x-ui::heading level="6" class="text-zinc-400 dark:text-zinc-500">Out for delivery</x-ui::heading>
<x-ui::text variant="muted">Pending</x-ui::text>
</x-ui::timeline-item>
<x-ui::timeline-item>
<x-slot:indicator>
<x-ui::timeline-indicator color="zinc" variant="outline" icon="check-circle" />
</x-slot:indicator>
<x-ui::heading level="6" class="text-zinc-400 dark:text-zinc-500">Delivered</x-ui::heading>
<x-ui::text variant="muted">Pending</x-ui::text>
</x-ui::timeline-item>
</x-ui::timeline>
</x-ui::card>