Timeline

Chronological event display with connecting lines, icons, and status indicators. Supports vertical orientation with customizable status per event.

Installation

# Install @opencosmos/ui to use Timeline
pnpm add @opencosmos/ui

Preview

Loading preview...

Customize

orientation— Layout orientation

Usage

Import

import { Timeline } from '@opencosmos/ui';

Example

<Timeline>
  Content
</Timeline>

Eject

Copy this component into your project for full customization

API Reference

Prop	Type	Default	Description
orientation	vertical \| horizontal	"vertical"	Layout orientation

Accessibility

Uses semantic <ol> for chronological order
aria-current="step" on active item
Status conveyed via icon + color
Icons are aria-hidden (decorative)

Code Examples

Basic Usage

A simple vertical timeline with status indicators

import { Timeline, TimelineItem } from '@opencosmos/ui'

<Timeline>
  <TimelineItem title="Order placed" timestamp="Jan 1" status="completed" />
  <TimelineItem title="Processing" timestamp="Jan 2" status="active" />
  <TimelineItem title="Shipped" status="pending" />
  <TimelineItem title="Delivered" status="pending" isLast />
</Timeline>