Timeline.

A clear sequence of events.

In practice

Compose TimelineItem with a machine-readable dateTime, visible timeLabel and title. Items remain a semantic ordered list.

Installation

Install Coal once. Components and TypeScript declarations are included. React 19 and React DOM 19 are peer dependencies.

npm install http://localhost:3100/downloads/chlohal-coal-ui-0.5.0.tgz

This installs the local package. It is not yet published on npm. See installation for stylesheet setup and integration.

Usage

"use client";
import * as React from "react";
import "@chlohal/coal-ui/styles.css";
import { Timeline, TimelineItem } from "@chlohal/coal-ui";
export default function Example() {
    return (<Timeline>
          <TimelineItem dateTime="2026-09-12T09:00:00" timeLabel="09:00" title="Project created">
            A quiet beginning.
          </TimelineItem>
          <TimelineItem dateTime="2026-09-12T10:30:00" timeLabel="10:30" title="Team invited">
            Ready to build together.
          </TimelineItem>
        </Timeline>);
}

Source

The original Coal implementation. Use the package export to integrate it.

import * as React from "react";
import { cn } from "./internal.js";
export function Timeline({
  className,
  ...props
}: React.ComponentPropsWithRef<"ol">) {
  return <ol className={cn("coal-timeline", className)} {...props} />;
}
export type TimelineItemProps = React.ComponentPropsWithRef<"li"> & {
  dateTime: string;
  timeLabel: string;
  title: string;
};
export function TimelineItem({
  dateTime,
  timeLabel,
  title,
  children,
  className,
  ...props
}: TimelineItemProps) {
  return (
    <li className={cn("coal-timeline-item", className)} {...props}>
      <time dateTime={dateTime}>{timeLabel}</time>
      <strong>{title}</strong>
      {children && <div>{children}</div>}
    </li>
  );
}

Accessibility checklist

• Provide an accessible name for controls, including icon-only buttons.
• Check keyboard navigation, visible focus and disabled states in your application.
• Do not rely on color alone to communicate status.