WARNING! You are browsing the docs for an old version of TallStackUI. See the v4 docs.

Powerful suite of Blade components for TALL Stack apps.

Timeline

Timeline component.

WARNING!

You are browsing the docs for an old version of TallStackUI. Consider upgrade your project to TallStackUI v4.

# 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.

Array mode auto-propagates container props (horizontal , compact , style , alternate ) to each item. Slot mode requires those props to be passed explicitly per item — Laravel's @aware directive does not propagate from class-based parents to slot children.

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" horizontal />
    <x-timeline.items title="Step B" description="Configuration" horizontal />
    <x-timeline.items title="Step C" description="Deployment" horizontal />
    <x-timeline.items title="Step D" description="Production" horizontal />
</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 />
Slot-mode items need the horizontal prop passed explicitly because Laravel's @aware does not propagate from class-based parents to slot children. Array mode (:items) auto-propagates.

# 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" compact />
    <x-timeline.items title="Step B" description="Second." date="Feb" compact />
    <x-timeline.items title="Step C" description="Third." date="Mar" compact />
</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

An option to visually distinguish the current/active item in the timeline.

Although there isn't a property to define a state as active, you can use the properties expected by each item to create a visual effect that indicates the current state in progress. Let's say you are creating a timeline of an online purchase. You can assemble the component as follows:

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