# Timeline

Published: March 1, 2026

Version: ^2.13.0

<img loading="lazy" class="rounded-2xl border dark:border-zinc-700" src="/img/blog/2_13_0_timeline_hero.png" alt="Timeline component showing a series of events with icons, colored indicators, and timestamps" />

Flux's new Timeline component makes it easy to display a sequence of events or steps to your users. Check it out:

```blade
<flux:timeline>
    <flux:timeline.item>
        <flux:timeline.indicator>
            <flux:icon.eye variant="micro" />
        </flux:timeline.indicator>

        <flux:timeline.content>
            <flux:heading>curtisss <flux:text inline>requested a review</flux:text></flux:heading>
        </flux:timeline.content>
    </flux:timeline.item>

    <!-- ... -->
</flux:timeline>
```

Each item has an **indicator** (icons, numbers, text — whatever you want) and a **content** area.

## Vertical, horizontal, with status

<img loading="lazy" class="rounded-2xl border dark:border-zinc-700" src="/img/blog/2_13_0_timeline_horizontal.png" alt="Horizontal timeline showing order tracking with complete, current, and incomplete steps" />

Add `horizontal` to flip the layout. Combine it with the `status` prop (`complete`, `current`, `incomplete`) to show progress — connector lines between items update automatically:

```blade
<flux:timeline horizontal>
    <flux:timeline.item status="complete">...</flux:timeline.item>
    <flux:timeline.item status="current">...</flux:timeline.item>
    <flux:timeline.item status="incomplete">...</flux:timeline.item>
</flux:timeline>
```

## Baseline alignment

<img loading="lazy" class="rounded-2xl border dark:border-zinc-700" src="/img/blog/2_13_0_timeline_baseline.png" alt="Timeline items with indicators perfectly baseline-aligned to their heading text" />

One detail we're particularly proud of: because the timeline uses CSS grid, we can align indicators to the **baseline** of the adjacent text — not top (too high), not center (too low), but right on the text baseline. For SVG icons, we even render an invisible text element inside the indicator solely to establish a proper baseline. It's a small thing, but it makes a real difference.

```blade
<flux:timeline align="baseline">
    <!-- ... -->
</flux:timeline>
```

## Embed anything with blocks

<img loading="lazy" class="rounded-2xl border dark:border-zinc-700" src="/img/blog/2_13_0_timeline_block.png" alt="Timeline with an embedded comment thread block between regular timeline items" />

Use `flux:timeline.block` to drop full-width content into the timeline — callouts, cards, comment threads. Blocks go full-bleed while regular items stay slightly inset, so embedded content feels like it truly *belongs* in the flow. Connector lines attach directly to the block edges, and `flux:timeline.subgrid` lets content inside a block snap to the outer timeline's columns using CSS subgrid — so avatars, text, and indicators all stay perfectly aligned.

## Accessibility

And of course, we went to great lengths to make sure this component honors expected keyboard navigation, focus behavior, and proper aria-labels so that screen readers can use it just as well.

---

[Check out the timeline docs →](https://fluxui.dev/components/timeline)