Log Viewer

High-throughput streaming log viewer with ANSI color parsing, search, level filtering, and tail auto-scroll.

@drift-ui/log-viewerRegistry JSONGitHubOpen in v0
12 lines
111:00:00INFO[server] Starting production server v2.4.1...
211:00:00DEBUGLoading environment variables from .env.production
311:00:00INFO✓ Connected to primary PostgreSQL database at pool-01:5432
411:00:00INFO✓ Redis cache cluster initialized (3 shards ready)
511:00:01WARN[warn] High memory threshold reached on node-3 (78% used)

Keyboard

↑↓
Scroll through log lines
HomeEnd
Jump to start or end of logs
PageUpPageDown
Scroll by one page
Escape
Clear search filter

The CLI also installs the npm packages and registry items it builds on, and reads the style in your components.json to pick the Base UI or Radix build.

log-viewer-usage.tsx
"use client"

import { LogViewer, type LogLine } from "@/components/ui/log-viewer"

const LOG_LINES: LogLine[] = [
  { id: "1", timestamp: Date.now() - 3000, level: "info", message: "Build started..." },
  { id: "2", timestamp: Date.now() - 2000, level: "info", message: "\u001b[32mCompiled successfully\u001b[0m in 1.2s" },
  { id: "3", timestamp: Date.now() - 1000, level: "warn", message: "\u001b[33mWarning: asset size exceeds recommended budget\u001b[0m" },
]

export function BuildLogs() {
  return (
    <LogViewer
      lines={LOG_LINES}
      height={360}
      showLineNumbers
      showTimestamps
    />
  )
}

LogViewer

High-throughput virtualized log viewer with ANSI color parsing, search, level filtering, and tail auto-scroll.

Prop
defaultFollowbooleanDefaulttrueInitial follow state when uncontrolled.
defaultLevelstringDefault"all"Initial level filter when uncontrolled.
defaultSearchstringDefault""Initial search query when uncontrolled.
defaultWrapbooleanDefaultfalseInitial line wrap state when uncontrolled.
emptyMessageReactNodeDefault"No log lines matching criteria"Message or element displayed when no logs match filters.
filterablebooleanDefaulttrueWhether to render log level filter buttons in the toolbar.
followbooleanControlled tail auto-scroll state.
heightnumber | stringDefault400Height of the virtualized log list viewport.
levelstringControlled level filter.
linesRequiredLogLine[]Array of log entries to display.
onFollowChange(follow: boolean) => voidCalled when follow state changes.
onLevelChange(level: string) => voidCalled when level filter changes.
onSearchChange(search: string) => voidCalled when search query changes.
onWrapChange(wrap: boolean) => voidCalled when line wrap is toggled.
rowHeightnumberDefault24Estimated line height in pixels for the virtual list.
searchstringControlled search query.
searchablebooleanDefaulttrueWhether to render the search filter input in the toolbar.
showLineNumbersbooleanDefaulttrueWhether to display line numbers in the gutter.
showTimestampsbooleanDefaulttrueWhether to display timestamps if present in the log line.
wrapbooleanControlled line wrap. When false, long messages scroll sideways in one shared viewport; when true, they wrap onto extra lines.

Other props go to the <div>.

Streaming follow

Simulates real-time log streaming. When follow is active, new lines automatically scroll into view. Scrolling up pauses follow and shows a floating Jump to latest button.

Simulating real-time server stream (3 lines)
3 lines
108:19:37INFOJob worker service starting up...
208:19:38INFO✓ Queue consumer connected to amqp://queue.internal:5672
308:19:39DEBUGPrefetch count set to 50 concurrent tasks

Search and level filtering

Isolate log lines by log level (such as error or warn) and filter lines matching a search query with a live match count.

2 of 7 lines
511:05:09ERROR[test-failed] billing-worker.test.ts: expected 200 received 500
611:05:10ERROR[fatal] Pipeline halted due to 1 test failure

ANSI color sequences

Supports 16-color ANSI codes, 256-color lookup, text styling (bold, italic, underline, dim), and safely renders untrusted logs without innerHTML.

5 lines
1INFOStandard colors: Red Green Yellow Blue Magenta Cyan
2INFOBright colors: Bright Red Bright Green Bright Yellow Bright Blue Bright Cyan
3INFOText styles: Bold Text, Dim Text, Italic Text, Underline Text, Strikethrough
4INFO256-color codes: Color 196 Color 208 Color 220 Color 46 Color 51
5INFOCompound styles: ✓ Success (Bold + Underline + Green)
components/ui/log-viewer.tsx
CtrlK