Timeline

Name: Veldora
Author: Shahriyar Fahim

Vertical timeline for activity logs, changelogs, or order tracking with icons, descriptions, and timestamps.

<x-timeline>

Default Style

Standard live preview and template usage for <x-timeline>.

Order Confirmed

Payment of $149.00 processed via Stripe.
Aug 23, 2026 · 10:04 AM
Dispatched with DHL Express

Tracking #DHL-94820491-BD in transit.
Aug 23, 2026 · 02:30 PM
Out for Delivery

Courier is en route to destination address.
Expected Aug 24, 2026 · By 05:00 PM

<?php
$events = [
    ['title' => 'Order Confirmed', 'description' => 'Payment processed.', 'time' => 'Aug 23, 2026', 'color' => '#22c55e'],
    ['title' => 'Dispatched',      'description' => 'Via DHL Express.',   'time' => 'Aug 23, 2026', 'color' => '#3b82f6'],
    ['title' => 'Out for Delivery','description' => 'En route.',          'time' => 'Aug 24, 2026', 'color' => '#a78bfa'],
];
?>
<x-timeline :items="$events" />

← Previous Stat Next → Accordion