Timeline

Events on a rail, such as an order's history.

An interactive page: C# runs over a Blazor Server connection.

A vertical list of events, such as a commit log, an order's history or a changelog: each TimelineItem has a marker on a rail, a title and time, and any content under it (a link, a description, actions).

Usage

razor

<Timeline>
    <TimelineItem Title="Add Section" Time="Oct 13" Current>
        <Anchor Href="...">93c85d4</Anchor>
    </TimelineItem>
</Timeline>

Links and the current item

Use Href for a title that links, Time and DateTime for when it happened, and Current for where things stand.

Preview Code

Preview

Add a full-bleed Section2 hours ago
93c85d4 Deployed to production
List and ProseYesterday
010d08e
Syntax highlightingOct 19
933584a

Code

Commits.razor

<Timeline Grow MaxWidth="32.Rem">
    <TimelineItem Title="Add a full-bleed Section" Href="https://example.com/commits/93c85d4" Time="2 hours ago" DateTime="2026-10-22T09:00Z" Current>
        <Row Gap="3" Align="Align.Center" Wrap>
            <Code>93c85d4</Code>
            <TextBlock As="span" Size="TextSize.Sm" Color="Color.Muted">Deployed to production</TextBlock>
        </Row>
    </TimelineItem>
    <TimelineItem Title="List and Prose" Href="https://example.com/commits/810d80e" Time="Yesterday" DateTime="2026-10-21">
        <Code>010d08e</Code>
    </TimelineItem>
    <TimelineItem Title="Syntax highlighting" Href="https://example.com/commits/933584a" Time="Oct 19" DateTime="2026-10-19">
        <Code>933584a</Code>
    </TimelineItem>
</Timeline>

Icons and status

Use Icon and Status to change an item's marker.

Preview Code

Preview

DeliveredOct 13, 2:14 PM
Left at the front door.
Out for deliveryOct 13, 8:02 AM
Delayed in transitOct 12
Weather at the regional hub.
Order placedOct 10

Code

Icons.razor

<Timeline Grow MaxWidth="32.Rem">
    <TimelineItem Title="Delivered" Time="Oct 13, 2:14 PM" Icon="Lucide.PackageCheck" Status="Status.Success">Left at the front door.</TimelineItem>
    <TimelineItem Title="Out for delivery" Time="Oct 13, 8:02 AM" Icon="Lucide.Truck" />
    <TimelineItem Title="Delayed in transit" Time="Oct 12" Icon="Lucide.TriangleAlert" Status="Status.Warning">Weather at the regional hub.</TimelineItem>
    <TimelineItem Title="Order placed" Time="Oct 10" Icon="Lucide.ShoppingCart" />
</Timeline>

Parts

Written inside Timeline. The API page lists their parameters.

TimelineItem: one event in a Timeline.

Mode support

What works in each mode, Timeline
Feature	Off	Static	Live
Everything	Yes	Yes	Yes

Off: JavaScript disabled. Static: a static SSR page with IzzyBlazor's script. Live: an interactive page (Server, WebAssembly or Auto).

Accessibility

It renders an ordered list: an ol with role="list" (which Safari otherwise drops from a list with no markers), with each TimelineItem an li, in the order written.
Current sets aria-current="true" on its item.
The marker and its icon are hidden, and its Status color isn't read: put a status that matters in the title or content.
With Href the title is a link; with DateTime the time is a time element.

Parameters

Timeline parameters
Prop	Type	Default
`As`The element to render: div on a Box; components built on it set their own (List a ul, Section a section).	`string`	`"ol"`
`ChildContent`The content.	`RenderFragment?`

Plus 25 surface props, 16 item props and 4 common props.

Full API