Data Stream

Component 52

About

An animated terminal-style log feed that reveals timestamped entries one by one with type-colored status dots for streaming data or activity monitors.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Data Stream to your project and fits it to your theme.

Code

How Data Stream is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { DataStream } from "@/components/ui/data-stream"

export default function DataStreamDemo() {
  return (
    <div className="flex min-h-[420px] w-full items-center justify-center bg-background p-8">
      <DataStream
        className="w-full max-w-md"
        title="DATA STREAM"
        entries={[
          { timestamp: "00:00:01", text: "Connection established to grid node", type: "success" },
          { timestamp: "00:00:02", text: "Authenticating credentials...", type: "info" },
          { timestamp: "00:00:03", text: "Sync latency 42ms", type: "info" },
          { timestamp: "00:00:04", text: "Buffer nearing capacity", type: "warning" },
          { timestamp: "00:00:05", text: "Packet 0x3F dropped", type: "error" },
          { timestamp: "00:00:06", text: "Retransmitting packet 0x3F", type: "info" },
          { timestamp: "00:00:07", text: "Stream stabilized", type: "success" },
          { timestamp: "00:00:08", text: "Awaiting next transmission", type: "info" },
        ]}
      />
    </div>
  )
}