Timeline

Use Timeline

Timeline is a named export of @flood-md/react. Connect the package once, then import what you use.

"use client";

import { FloodRoot, Timeline } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <Timeline label="Project activity" items={[{id:"created",title:"Project created",state:"complete"},{id:"review",title:"Design review",state:"current"},{id:"release",title:"Release",state:"upcoming"}]} />
    </FloodRoot>
  );
}

Design notes

• The native ordered list is read in the supplied order; the component does not sort or group events. IDs/titles are nonempty, IDs are unique and at most one event may be current.
• Each state has a visually hidden text equivalent; localize stateLabels. timeLabel is user-facing text and dateTime, when supplied, is the machine-readable time. Both are host-owned.
• Markers and optional artwork are decorative. This is an event display, not a wizard or navigation control. Long descriptions and times wrap without changing marker alignment.
• Compatible addition in 0.2.5. Uses existing Flood semantic tokens and relative geometry.

API reference