Skip to content

Timeline

Events connected by a fine thread, with the present kept distinct.

Live — this one is real

  1. Foundations repaired

    Keyboard and motion contracts checked.
  2. Package validated

    Installed mizu-ui in a fresh app.
  3. Release review

Usage

import { Timeline } from "mizu-ui";

export function Example() {
  return (
    <Timeline
      label="Illustrative release timeline"
      items={[
        {
          id: "a",
          title: "Foundations repaired",
          time: "Monday",
          state: "complete",
          body: "Keyboard and motion contracts checked.",
        },
        {
          id: "b",
          title: "Package validated",
          time: "Tuesday",
          state: "current",
          body: "Installed mizu-ui in a fresh app.",
        },
        {
          id: "c",
          title: "Release review",
          time: "Wednesday",
          state: "upcoming",
        },
      ]}
    />
  );
}

Source & setup

Import mizu-ui/styles.css once. Fonts are optional via mizu-ui/fonts.css. Override --mizu-* tokens or use className for local styling. Uses native React and CSS; install the package peers for root imports.

Inspect data/Records.tsx

Source is included in the npm package under src/data/Records.tsx.

Open full source ↗

Props

PropTypeDefaultDescription
itemsTimelineEvent[]—Stable id, title, time, optional dateTime, body and state.
labelstring"Timeline"List name.

Accessibility

Ordered list and time elements preserve chronology. State is a visual aid, so include state information in the event content when essential.

Motion

Static connective geometry.

Works alongside