TallStackUI, Timeline

# Basic Usage

Jan 2026

v1.0 shipped

Initial release.

Feb 2026

v1.1 patch

Bugfixes and refinements.

Mar 2026

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>

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.

Feb 2026

v3.0-alpha

First alpha release.

Mar 2026

v3.0-beta

Community testing phase.

Apr 2026

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:

Q1

Planning

Research and spec.

See the full changelog.

Q2

Building

Implementation.

Q3

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

Feb 2026

v3.0-alpha

First alpha release.

Mar 2026

v3.0-beta

Community testing phase.

Apr 2026

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

Jan

Step A

First.

Feb

Step B

Second.

Mar

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

Q1

Primary

Brand color

Q2

Primary

Brand color

Q1

Emerald

Calm green

Q2

Emerald

Calm green

Q1

Rose

Soft red

Q2

Rose

Soft red

Q1

Indigo

Deep blue

Q2

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

Q1

Solid

Filled marker

Q2

Solid

Filled marker

Q1

Light

Tinted marker

Q2

Light

Tinted marker

Q1

Outline

Bordered marker

Q2

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

Q1

Default

Q2

Green override

Q3

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:

04/01/2026

Preparing package

The sender is preparing the package for shipment.

04/02/2026

Shipping

The package is in transit to the destination.

04/04/2026

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 />