Skip to content
MIZU.

SIG—19 Signature system

LogStream

A live log tail that renders only what is in view: it follows new lines until you scroll away, counts what you missed, and searches, filters and opens any line whole.

Live — this one is real

Source

It follows new lines until you scroll up, then counts what you missed. Filter by level, search with Enter to step through matches, and pick a line to read it whole. The overview above the lines is clickable. The service is invented.

Waiting for the first line…

Source rate · keeps the last 2000 lines
Rate
0 lines

Usage

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

export function Example() {
  const t = Date.UTC(2026, 0, 12, 9, 30);
  return (
    <LogStream
      label="deploy #214"
      utc
      lines={[
        {
          id: 1,
          time: t,
          level: "info",
          source: "build",
          message: "Build started on runner-3",
        },
        {
          id: 2,
          time: t + 4200,
          level: "warn",
          source: "cache",
          message: "Cache cold: restoring 312 files",
        },
        {
          id: 3,
          time: t + 9100,
          level: "error",
          source: "migrate",
          message: "Step migrate failed: lock timeout after 30 s",
          fields: { step: "migrate", exit: 1 },
        },
      ]}
    />
  );
}

This code, running — no configuration beyond the data

Keyboard

↑↓PageUpPageDown
Select a line (pauses following)
HomeEnd
First line, or back to the live tail
Esc
Close the selected line
EnterShift+Enter
Next or previous match, in the search field

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/log-stream

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

tsx
import { LogStream } from "@/components/ui/mizu/log-stream";

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/LogStream.tsx

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

Open full source ↗

Props

PropTypeDefaultDescription
label / linesstring / LogLine[]—Oldest first: id, time (ms), level (debug, info, warn, error), message, with optional source and fields. Append as lines arrive and trim to bound memory.
selected / defaultSelected / onSelectedChangeid | null—The line open in the detail panel, for syncing with a chart or timeline.
loading / emptyboolean / ReactNode—Skeleton rows with a scan line, or what an empty log says.
utcbooleanfalseShow times in UTC instead of local time.
--mizu-log-heightCSS length—Height of the scrolling lines (420px).

Accessibility

The lines are a listbox with one tab stop; arrows, Page keys, Home and End move the selection, which is announced through aria-activedescendant, and only rendered lines are ever referenced. Levels are toggle buttons with counts, the search reports its matches as they change, and while you are paused, missed lines are announced at most every five seconds rather than line by line.

Motion

New lines glow briefly as they arrive at the tail. Scrolling away pauses the follow and a count of missed lines springs up from the bottom; choosing it drops you back to the live tail. The overview strip marks the stretch in view as you scroll. Reduced motion keeps every state without the travel.

Works alongside

ChronicleTrendChartWaveformPlane