# Timeline

Source: https://lumeo.nativ.sh/components/timeline

# Timeline

Displays a list of events in chronological order.

## Installation

.NET CLI PackageReference Lumeo CLI

dotnet add package Lumeo

One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction).

## Usage

@using Lumeo

<Timeline />

## When to Use

-   Activity feeds showing user actions or system events
-   Event history logs such as order tracking or audit trails
-   Changelogs and release notes displayed chronologically
-   Process tracking where each stage has a timestamp

Preview Code

Vertical Timeline

Order placed

Your order has been placed successfully.

Jan 1, 2025

Processing

Your order is being processed.

Jan 2, 2025

Shipped

Your order has been shipped via express.

Jan 3, 2025

Delivered

Your order has been delivered.

Jan 5, 2025

Preview Code

With Icons

Account created

Welcome to the platform.

9:00 AM

Profile updated

Added profile picture and bio.

10:30 AM

First post

Published your first article.

2:00 PM

Preview Code

Horizontal Timeline

Step 1

Planning

Step 2

Design

Step 3

Development

Step 4

Launch

Preview Code

Orientation (interactive)

Switch orientation to compare vertical and horizontal layouts.

Vertical Horizontal

Planning

Scope defined

Jan 1

Design

Wireframes approved

Jan 8

Development

Sprint in progress

Jan 15

Launch

Shipped to production

Feb 1

Preview Code

ActiveIndexChanged — interactive

Requirements

Gathered and approved.

Week 1

Design

Wireframes signed off.

Week 2

Development

Feature branch in progress.

Week 3

QA

Test suite running.

Week 4

Release

Deployed to production.

Week 5

Previous Next

Active: step 2 of 5

Clicking Next / Previous advances or retreats the active step. ActiveIndexChanged fires on each change and updates the status line below.

Preview Code

Animated Timeline

Order placed

Your order has been placed.

Jan 1, 2025

Processing

Your order is being processed.

Jan 2, 2025

Shipped

Shipped via express.

Jan 3, 2025

Delivered

Has been delivered.

Jan 5, 2025

Previous Next Replay

Active dot pulses at `ActiveIndex`; earlier items fill in as completed, connectors draw in.

## API Reference

### Timeline

Property

Type

Default

Description

Orientation

Lumeo.Orientation

Vertical

Layout direction. Values: Vertical, Horizontal.

ChildContent

RenderFragment?

null

TimelineItem children.

Animated

bool

false

When true, items fade-in with staggered delay, connectors draw in, and the active item pulses.

ActiveIndex

int?

null

When set with Animated, drives active-dot progression: items before the index are "completed", the item at ActiveIndex pulses, later items are pending. Connectors draw in as you advance.

ActiveIndexChanged

EventCallback<int>

—

Two-way binding callback for ActiveIndex.

### TimelineItem

Property

Type

Default

Description

Title

string?

null

Event title.

Description

string?

null

Event description text.

Time

string?

null

Timestamp label.

IconContent

RenderFragment?

null

Custom icon slot replacing the default dot. (Icon is a deprecated alias.)

IsActive

bool

false

Marks this item as the current step. When the parent Timeline is Animated, the indicator pulses.

## Related Components

-   [Steps](/components/steps) — Track progress through actionable sequential stages
-   [Card](/components/card) — Wrap timeline events in cards for richer content display