Laravel Timeline Component

Free · MIT

A vertical timeline component for displaying chronological events with icons, colors, and dates.

A Timeline built for the TALL stack — Blade, Livewire 3 & 4, Alpine.js and Tailwind CSS 4. Server-rendered by default, dark-mode ready, and WCAG-minded. Drop it in with a single Blade tag: <x-aura::timeline>

Try it live in the docs Install free

Installation

composer require bluestarsystem/aura-ui

Usage

<x-aura::timeline>
    <x-aura::timeline.item>Account created.</x-aura::timeline.item>
    <x-aura::timeline.item>Profile updated.</x-aura::timeline.item>
    <x-aura::timeline.item>First order placed.</x-aura::timeline.item>
</x-aura::timeline>

See the full API, props and live examples in the Timeline documentation.

Overview

The <x-aura::timeline> component renders a vertical timeline of events. Each item supports an icon, color variant, and date label. The timeline can optionally alternate items left and right for a centered layout.

Props

Timeline

Prop	Type	Default	Description
`alternate`	`bool`	`false`	Alternate items left and right for a centered layout.

Timeline Item

Prop	Type	Default	Description
`icon`	`string\|null`	`null`	Icon name displayed in the timeline dot.
`color`	`string`	`'primary'`	Color variant: `primary`, `success`, `danger`, `warning`, `info`, `secondary`.
`date`	`string\|null`	`null`	Date or time label displayed alongside the item.