Components

Timeline

A vertical timeline of events, with dots, connecting lines, icons and timestamps.

php artisan blatui:add timeline

09:41

Deployed to production

Shipped 3 commits to main — zero downtime.
Yesterday

Opened a pull request

Add the timeline component, examples and docs.
2 days ago

Reviewed by Sofia

“Looks great — ship it.”
3 days ago

Milestone created

Component library v1.11 planning.

<x-ui.timeline class="w-full max-w-md">
    <x-ui.timeline-item icon="git-commit-horizontal" time="09:41" title="Deployed to production" active>
        Shipped 3 commits to <code>main</code> — zero downtime.
    </x-ui.timeline-item>
    <x-ui.timeline-item icon="git-pull-request" time="Yesterday" title="Opened a pull request">
        Add the timeline component, examples and docs.
    </x-ui.timeline-item>
    <x-ui.timeline-item icon="message-square" time="2 days ago" title="Reviewed by Sofia">
        “Looks great — ship it.”
    </x-ui.timeline-item>
    <x-ui.timeline-item icon="flag" time="3 days ago" title="Milestone created">
        Component library v1.11 planning.
    </x-ui.timeline-item>
</x-ui.timeline>

API Reference

Props, slots and exposed methods for <x-ui.timeline>.

Props

Prop	Type	Default	Description
`item`	`props`	—	The timeline itself takes no props — it is composed by nesting <x-ui.timeline-item> in the default slot. Each item accepts the props below. See Each <x-ui.timeline-item> below.

Each <x-ui.timeline-item>

Prop	Type	Default	Description
`icon`	`string`	—	A lucide icon name shown inside the marker dot. Omit for a small solid dot instead.
`time`	`string`	—	Optional timestamp or eyebrow text shown above the title.
`title`	`string`	—	Optional bold title for the event. Free-form content can also go in the item slot.
`active`	`bool`	`false`	Highlights the marker dot in the primary colour to mark the current or latest event.

Slots

Slot	Description
`default`	One <x-ui.timeline-item> per event, in order. The connector line is automatically hidden under the last item.