Skip to content
MIZU.

SIG—01 Signature system

Chronicle

A zoomable, multi-lane timeline for incidents, releases and audit trails — spans, instants, a playhead and an overview brush.

Live — this one is real

Scenario

Illustrative data. Drag to pan, pinch or Ctrl-scroll to zoom, and drag the diamond playhead.

INC-4127 checkout latency

Arrow keys pan, plus and minus zoom, 0 fits every event, Home and End jump to the edges. Pinch or Control-scroll to zoom.

Left and right move through a lane, up and down change lanes, Enter selects, Escape clears.

p95 above 2s

14:05 — 14:34 · 29m 00s · Checkout API

Retries doubled the load on the primary database; checkout requests queued behind them.

Playhead drives this readoutConnection pool saturated · 5xx rate 4.2% · p95 above 2s · Incident bridge

Usage

tsx
import { Chronicle } from "mizu-ui";

export function Example() {
  const at = (h: number, m: number) => Date.UTC(2026, 8, 27, h, m);
  return (
    <Chronicle
      label="Checkout incident"
      utc
      lanes={[
        { id: "deploys", label: "Deploys" },
        { id: "api", label: "API" },
        { id: "alerts", label: "Alerts" },
      ]}
      events={[
        {
          id: "deploy",
          lane: "deploys",
          start: at(14, 2),
          label: "Deploy v2.41",
          tone: "accent",
          detail: "Canary promoted to every region.",
        },
        {
          id: "latency",
          lane: "api",
          start: at(14, 6),
          end: at(14, 31),
          label: "p95 above 2s",
          tone: "danger",
        },
        {
          id: "page",
          lane: "alerts",
          start: at(14, 9),
          label: "On-call paged",
          tone: "warning",
        },
        {
          id: "rollback",
          lane: "deploys",
          start: at(14, 24),
          label: "Rollback",
          tone: "success",
        },
      ]}
    />
  );
}

This code, running — no configuration beyond the data

Checkout incident

Arrow keys pan, plus and minus zoom, 0 fits every event, Home and End jump to the edges. Pinch or Control-scroll to zoom.

Left and right move through a lane, up and down change lanes, Enter selects, Escape clears.

Keyboard

←→
Pan the viewport (Shift for larger steps)
+−
Zoom around the playhead or centre
0
Fit every event
HomeEnd
Jump to the first or last events
Ctrl+scroll
Zoom at the pointer (pinch on touch)
←→↑↓
On an event: move through a lane, change lanes
Enter·Esc
Select an event · clear selection

Source & setup

Add this component to your project with the shadcn CLI. The command copies its source into your configured UI directory, with its source module’s stylesheet and base.css, Mizu’s tokens. In a project without a components.json, run npx shadcn@latest init 0xuser64bit/mizu/preset first: plain init installs shadcn’s theme into your global CSS. Then load the fonts.

sh
npx shadcn@latest add 0xuser64bit/mizu/chronicle

Every component imports from its own path, its name in kebab case.

tsx
import { Chronicle } from "@/components/ui/mizu/chronicle";

For npm imports, import mizu-ui/styles.css once. Fonts are optional via mizu-ui/fonts.css. Override --mizu-* tokens or use className for local styling. Requires React and Motion. A Client Component: its source starts with “use client”.

Inspect signature/Chronicle.tsx

Source is included in the npm package under src/signature/Chronicle.tsx.

Open full source ↗

Props

PropTypeDefaultDescription
labelstring—Accessible name and visible heading.
eventsChronicleEvent[]—id, lane, start, optional end (omit for an instant), label, tone and detail content.
lanesChronicleLane[]—Lane order and names. Derived from the events when omitted.
range / defaultRange / onRangeChange[number, number]—Visible interval in ms. Fits every event until the viewer moves.
cursor / defaultCursor / onCursorChangenumber—Playhead time. Supply either to show it and drive other views.
selected / defaultSelected / onSelectedChangestring | null—Selected event id; its detail opens beneath the lanes.
nownumber | Date—Marks the present.
utcbooleanfalseAlign and label time in UTC.
minSpannumber1000Smallest visible interval in ms.
loading / emptyboolean / ReactNode—Loading and empty states.

Accessibility

The viewport is a focusable region with keyboard panning and zoom. Events form a listbox grouped by lane; each option names its label, time and duration, and selection is announced. The playhead is a slider with readable time. The overview brush is a pointer shortcut — every action has a keyboard path.

Motion

Events sweep in left to right on first view. Button and keyboard zooms glide in log space so scale changes feel even; drags pan directly and coast to rest. Reduced motion removes the sweep, glide and coasting.

Works alongside

TrendChartWaveformPlaneFlowGraph