Timeline
Shows the history of a record in chronological order along a vertical line. Suited to order history, support ticket workflows or activity logs.
Basic usage
List the events as acun:timeline.item inside acun:timeline. title is required; time is shown to the right of the title and is free text ("12.09.2026 14:32" or "2 hours ago"). The text you write inside the item appears below the title.
<acun:timeline>
<acun:timeline.item title="Delivered" time="12.09.2026 14:32">Package handed to the recipient at the door.</acun:timeline.item>
<acun:timeline.item title="Shipped" time="11.09.2026 09:00">Package left the Kadıköy warehouse.</acun:timeline.item>
<acun:timeline.item title="Order placed" time="10.09.2026 16:47" />
</acun:timeline>| Prop | Values |
|---|---|
title | Event title (required) |
time | Time text to the right of the title |
Colors
The dot color is set with color; if omitted, brand is used. Choose the color by the outcome of the event: success for completed work, warning for items that need attention, danger for cancellations and errors, neutral for system records.
<acun:timeline>
<acun:timeline.item title="Delivered" time="12.09.2026" color="success" />
<acun:timeline.item title="Recipient not available" time="10.09.2026" color="warning" />
<acun:timeline.item title="Delivery canceled" time="08.09.2026" color="danger" />
<acun:timeline.item title="Address updated" time="05.09.2026" color="info" />
<acun:timeline.item title="Shipped" time="01.09.2026" />
<acun:timeline.item title="Order placed" time="28.08.2026" color="secondary" />
</acun:timeline>| Prop | Values |
|---|---|
color | primary | secondary | success | danger | warning | info | dark (brand = primary, neutral = secondary) |
Rich content
The content does not have to be plain text; you can add an avatar, a badge or a link. If the content is empty, only the title row is shown. Extra attributes such as class that you pass to acun:timeline.item are added to the content box, not to the li.
<acun:timeline>
<acun:timeline.item title="Delivered" time="12.09.2026 14:32" color="success">
<div class="flex flex-wrap items-center gap-2">
<acun:avatar name="Mehmet Kaya" size="xs" color="success" />
<span>Received by Mehmet Kaya</span>
<acun:badge variant="success">Express shipping</acun:badge>
</div>
</acun:timeline.item>
<acun:timeline.item title="Invoice issued" time="05.09.2026 10:12" color="info">
<a href="#" class="font-medium text-brand-600 hover:underline dark:text-brand-400">invoice-ORD-10482.pdf</a>
</acun:timeline.item>
<acun:timeline.item title="Order placed" time="28.08.2026 16:47" color="secondary" />
</acun:timeline>| Prop | Values |
|---|---|
(slot) | Content below the title; not shown when empty |
Props and slots
The values the component accepts.
| Prop | Default | Description |
|---|---|---|
timeline.item: title | — | Event title (required) |
timeline.item: time | null | Time text to the right of the title |
timeline.item: color | primary | primary · secondary · success · danger · warning · info · dark (brand = primary, neutral = secondary) |