Timeline

A vertical sequence of events with icons, timestamps, and connecting lines. Compose base-timeline-item inside base-timeline. Set [last]="true" on the final item to hide the trailing connector.

free

Default Timeline

Use color to control the dot color. Available: primary, success, danger, warning, accent, default.

Jan 12, 2026 · 09:00

Project kickoff

Requirements gathered and team assembled for Q1 launch.

Feb 3, 2026 · 14:30

Design approved

High-fidelity mockups signed off by stakeholders.

Mar 18, 2026 · 11:00

Beta release

First internal beta deployed to staging environment.

Apr 1, 2026 · 10:00

Public launch

Product shipped to production for all users. 🎉

HTML

Timeline with Icons

Pass any icon name to icon to replace the plain dot with a stroke icon.

09:00 AM

Account created

09:05 AM

Email verified

09:10 AM

2FA enabled

09:15 AM

Profile completed

HTML

Compact Timeline

Skip the time input for a minimal list-style layout.

Installed dependencies

Configured environment

Running build…

Deploy to production

Installation

Run the following command to add this component to your project:

bash

npx base-ui-cli add timeline

API Reference

For AI agents

Copy a prompt with the registry name, CLI install, and import — or add the Base UI MCP server.

bash

npx -y base-ui-mcp

Base UI provides standalone components. Import the exact elements you want to use into your component.

typescript (Example)

// Install: npx base-ui-cli add timeline
// Paths are relative to aliases.components (default: src/app/components)
import { TimelineItemComponent } from './timeline/timeline-item/timeline-item.component';
import { TimelineComponent } from './timeline/timeline.component';

@Component({
  selector: 'app-your-component',
  imports: [
    TimelineComponent,
    TimelineItemComponent
  ],
  template: `...`
})
export class YourComponent {}

API for timeline — generated from JSDoc in the library source.

API reference for timeline
API	Member	Type	Default	Description
`base-timeline`	`—`	`—`	—	A vertical timeline container. Wrap `base-timeline-item` elements inside.
`base-timeline`	`class`	`string`	`''`	Additional host CSS classes (merged via cn()).
`base-timeline-item`	`class`	`string`	`''`	Additional host CSS classes (merged via cn()).
`base-timeline-item`	`color`	`TimelineColor`	`'primary'`	The color of the dot/icon.
`base-timeline-item`	`icon`	`string \| undefined`	`undefined`	Optional icon name from the icon pack displayed inside the dot.
`base-timeline-item`	`time`	`string \| undefined`	`undefined`	Optional timestamp label shown above the content.
`base-timeline-item`	`last`	`boolean`	`false`	Set to true on the last item to hide the connecting line.