Skip to content
MIZU.

ActivityFeed

Filter a real event stream by its event type without losing chronological context.

Live — this one is real

Illustrative event stream

  1. You created WaveText
  2. Mizu validated the package
  3. You created Signal

Usage

import { ActivityFeed } from "mizu-ui";

export function Example() {
  return (
    <ActivityFeed
      label="Illustrative event stream"
      items={[
        {
          id: "a",
          actor: "You",
          action: "created WaveText",
          time: "10:24",
          type: "Created",
        },
        {
          id: "b",
          actor: "Mizu",
          action: "validated the package",
          time: "10:31",
          type: "Validated",
        },
        {
          id: "c",
          actor: "You",
          action: "created Signal",
          time: "11:02",
          type: "Created",
        },
      ]}
    />
  );
}

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

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

Open full source ↗

Props

PropTypeDefaultDescription
itemsActivity[]—Stable event id, actor, action, time and optional type/dateTime.
labelstring—Feed and filter name.

Accessibility

Events are an ordered list. A labelled native select filters event types. Empty views remain explained.

Motion

CSS transitions explain state changes. Reduced motion removes travel.

Works alongside

DataTableDescriptionListStatBarChart