TallStackUI 4.0 is here! Seven new components and thousand of improvements. See what's new .

Powerful suite of Blade components for TALL Stack apps

Timeline

Timeline component.

# Basic Usage

v1.0 shipped

Initial release.

v1.1 patch

Bugfixes and refinements.

v2.0 released

Major rewrite of the suite.

<x-timeline>
    <x-timeline.items title="v1.0 shipped"
                      description="Initial release."
                      date="Jan 2026" />
    <x-timeline.items title="v1.1 patch"
                      description="Bugfixes and refinements."
                      date="Feb 2026" />
    <x-timeline.items title="v2.0 released"
                      description="Major rewrite of the suite."
                      date="Mar 2026" />
</x-timeline>

# Render Modes

Timeline supports two render modes: passing items via the :items prop (array or Collection) or declaring children as <x-timeline.items> in a slot. Combining both raises InvalidArgumentException at render time.

Container props ( horizontal , alternate , compact , color and style ) are inherited by the items in both modes , so they do not have to be repeated on each item. Only color and style are meant to be overridden per item: the layout flags describe the timeline as a whole, and setting them on a single item leaves it out of step with its siblings. 

<x-timeline horizontal color="green">
    <x-timeline.items title="A" />
    <x-timeline.items title="B" color="red" /> <!-- overrides just this one -->
</x-timeline>

v3.0-alpha

First alpha release.

v3.0-beta

Community testing phase.

v3.0 stable

Production-ready.

<!--
Each entry accepts the following keys: title, description, date, icon, color.
Raw HTML values (default slot, custom marker) are NOT accepted in array mode —
use slot mode for rich content instead.
-->
 
@php
    $releases = collect([
        ['title' => 'v3.0-alpha',  'description' => 'First alpha release.',     'date' => 'Feb 2026', 'icon' => 'beaker'],
        ['title' => 'v3.0-beta',   'description' => 'Community testing phase.', 'date' => 'Mar 2026', 'icon' => 'light-bulb'],
        ['title' => 'v3.0 stable', 'description' => 'Production-ready.',        'date' => 'Apr 2026', 'icon' => 'rocket-launch', 'color' => 'green'],
    ]);
@endphp
 
<x-timeline :items="$releases" />

Slot mode unlocks <x-slot:marker> and rich content inside the default slot:

Planning

Research and spec.

See the full changelog .

Building

Implementation.

Released

Tagged and published.

<x-timeline>
    <x-timeline.items title="Planning" description="Research and spec." date="Q1">
        <p class="mt-2 text-sm text-gray-600">
            See the <a href="/changelog" class="underline">full changelog</a>.
        </p>
    </x-timeline.items>
    <x-timeline.items title="Building" description="Implementation." date="Q2" />
    <x-timeline.items title="Released" description="Tagged and published." date="Q3" />
</x-timeline>

# Horizontal Orientation

Step A

Initial setup

Step B

Configuration

Step C

Deployment

Step D

Production

<x-timeline horizontal>
    <x-timeline.items title="Step A" description="Initial setup" />
    <x-timeline.items title="Step B" description="Configuration" />
    <x-timeline.items title="Step C" description="Deployment" />
    <x-timeline.items title="Step D" description="Production" />
</x-timeline>
 
<!-- or -->
 
@php
    $releases = collect([
        ['title' => 'v3.0-alpha',  'description' => 'First alpha release.',     'date' => 'Feb 2026', 'icon' => 'beaker'],
        ['title' => 'v3.0-beta',   'description' => 'Community testing phase.', 'date' => 'Mar 2026', 'icon' => 'light-bulb'],
        ['title' => 'v3.0 stable', 'description' => 'Production-ready.',        'date' => 'Apr 2026', 'icon' => 'rocket-launch', 'color' => 'green'],
    ]);
@endphp
 
<x-timeline :items="$releases" horizontal />

# Alternate Layout

v3.0-alpha

First alpha release.

v3.0-beta

Community testing phase.

v3.0 stable

Production-ready.

<!--
Alternate uses a 3-column grid (`[1fr_auto_1fr]`) that distributes the timeline's
horizontal space. Markers land at 50% of the timeline width. Constrain via a wrapping
container or `class="max-w-*"` on `<x-timeline>` when you do not want it to fill the parent.
-->
 
@php
    $items = collect([
        ['title' => 'v3.0-alpha',  'description' => 'First alpha release.',     'date' => 'Feb 2026'],
        ['title' => 'v3.0-beta',   'description' => 'Community testing phase.', 'date' => 'Mar 2026'],
        ['title' => 'v3.0 stable', 'description' => 'Production-ready.',        'date' => 'Apr 2026'],
    ]);
@endphp
 
<div class="max-w-md">
    <x-timeline :items="$items" alternate /> 
</div>
Alternate uses a 3-column grid that distributes the timeline's horizontal space. Wrap it in a max-w-* container or apply class="max-w-*" to the timeline so the line lands at a comfortable midpoint instead of stretching across the full parent width.

# Compact Spacing

Step A

First.

Step B

Second.

Step C

Third.

<!-- Default: 24px gap between items, line with segments -->
<x-timeline>
    <x-timeline.items title="Step A" description="First." date="Jan" />
    <x-timeline.items title="Step B" description="Second." date="Feb" />
    <x-timeline.items title="Step C" description="Third." date="Mar" />
</x-timeline>
 
<!-- Compact: continuous line, no gap between items -->
<x-timeline compact> 
    <x-timeline.items title="Step A" description="First." date="Jan" />
    <x-timeline.items title="Step B" description="Second." date="Feb" />
    <x-timeline.items title="Step C" description="Third." date="Mar" />
</x-timeline>

# Icon Markers

Planning

Research and spec.

Building

Implementation.

Testing

Feature + browser tests.

Release

Tagged and published.

<x-timeline>
    <x-timeline.items title="Planning"
                      description="Research and spec."
                      icon="pencil-square" /> 
    <x-timeline.items title="Building"
                      description="Implementation."
                      icon="wrench-screwdriver" />
    <x-timeline.items title="Testing"
                      description="Feature + browser tests."
                      icon="beaker" />
    <x-timeline.items title="Release"
                      description="Tagged and published."
                      icon="rocket-launch" />
</x-timeline>

# Custom Marker Slot

1

Numbered step 1

First step.

2

Numbered step 2

Second step.

3

Numbered step 3

Third step.

<x-timeline color="rose">
    <x-timeline.items title="Numbered step 1" description="First step.">
        <x-slot:marker> 
            <span class="flex h-6 w-6 items-center justify-center rounded-full bg-rose-600 text-xs font-bold text-white">1</span>
        </x-slot:marker>
    </x-timeline.items>
    <x-timeline.items title="Numbered step 2" description="Second step.">
        <x-slot:marker>
            <span class="flex h-6 w-6 items-center justify-center rounded-full bg-rose-600 text-xs font-bold text-white">2</span>
        </x-slot:marker>
    </x-timeline.items>
    <x-timeline.items title="Numbered step 3" description="Third step.">
        <x-slot:marker>
            <span class="flex h-6 w-6 items-center justify-center rounded-full bg-rose-600 text-xs font-bold text-white">3</span>
        </x-slot:marker>
    </x-timeline.items>
</x-timeline>

# Color Variations

Primary

Brand color

Primary

Brand color

Emerald

Calm green

Emerald

Calm green

Rose

Soft red

Rose

Soft red

Indigo

Deep blue

Indigo

Deep blue

<!-- Support all TailwindCSS colors. -->
 
<x-timeline color="primary">...</x-timeline>
<x-timeline color="emerald">...</x-timeline>
<x-timeline color="rose">...</x-timeline>
<x-timeline color="indigo">...</x-timeline>

# Style Variations

Solid

Filled marker

Solid

Filled marker

Light

Tinted marker

Light

Tinted marker

Outline

Bordered marker

Outline

Bordered marker

<!-- solid: filled marker with color fill + white ring (default) -->
<x-timeline color="indigo" style="solid">...</x-timeline>
 
<!-- light: tinted marker with lighter color background -->
<x-timeline color="indigo" style="light">...</x-timeline>
 
<!-- outline: transparent marker with colored border -->
<x-timeline color="indigo" style="outline">...</x-timeline>

# Per-Item Color Override

Default

Green override

Red override

@php
    $items = [
        ['title' => 'Default', 'date' => 'Q1'],
        ['title' => 'Green override', 'date' => 'Q2', 'color' => 'green'], 
        ['title' => 'Red override', 'date' => 'Q3', 'color' => 'red'],
    ];
@endphp
 
<x-timeline color="primary" :items="$items" />

# Current Activation State

Preparing package

The sender is preparing the package for shipment.

Shipping

The package is in transit to the destination.

Received

The package has been delivered to the recipient.

@php
    $items = collect([
        ['title' => 'Preparing package', 'description' => 'The sender is preparing the package for shipment.', 'date' => '04/01/2026', 'icon' => 'check', 'color' => 'green'],
        ['title' => 'Shipping', 'description' => 'The package is in transit to the destination.', 'date' => '04/02/2026', 'icon' => 'clock', 'color' => 'yellow'],
        ['title' => 'Received', 'description' => 'The package has been delivered to the recipient.', 'date' => '04/04/2026', 'icon' => 'clock', 'color' => 'yellow'],
    ]);
@endphp
 
<x-timeline :items="$state" horizontal />

Code highlighting provided by Torchlight