Log Viewer React component for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Log Viewer is part of Pro, with 298 more Pro items: $8 a month or $150 once. 14-day refund before you download any Pro item. See plans

Usage

Import LogViewer from @/components/ui/log-viewer.

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

const initial: LogLine[] = [
  { time: "2026-09-24T13:38:12.345Z", level: "info", source: "sync", message: "Fetching messages for tax ID 12-3456740" },
  { time: "2026-09-24T13:38:12.902Z", level: "warn", source: "sync", message: "Invoice 2026-0409: slow response, retrying (2/5)" },
  {
    time: "2026-09-24T13:38:13.410Z",
    level: "error",
    source: "validator",
    message: "Validation error: BR-CO-17 tax amount differs",
    meta: { invoice: "2026-0411", code: "BR-CO-17" },
  },
]

export function SyncJobLog({ events }: { events: EventSource }) {
  const [api, setApi] = useState<LogViewerApi | null>(null)

  useEffect(() => {
    if (!api) return
    const onMessage = (event: MessageEvent<string>) => api.append(event.data)
    events.addEventListener("message", onMessage)
    return () => events.removeEventListener("message", onMessage)
  }, [api, events])

  return (
    <LogViewer
      lines={initial}
      setApi={setApi}
      fileName="invoices-4812"
      searchShortcut="mod+shift+f"
      locale="en-US"
      labels={{ search: "Filter the log" }}
    />
  )
}

Props

• linesdefault "[]"
  LogLine[] | string[]

  The lines: { id?, time?, level?, message, source?, meta? } or raw strings (parsed with parseLogLine). Pass a new array to append: only the new tail is read; a shorter or different array starts over. For high rates use setApi().append, which never re-renders the parent.

• maxLinesdefault 100000
  number

  A ring buffer: past it the oldest lines drop and the footer says how many. Lowering it at runtime trims from the start.

• levelsdefault "["trace", "debug", "info", "warn", "error", "fatal"]"
  LogLevel[]

  The level chips shown in the toolbar ("trace", "debug", "info", "warn", "error", "fatal").

• levelFilter
  LogLevel[]

  Controlled visible levels. Lines without a level are always shown.

• defaultLevelFilterdefault "["trace", "debug", "info", "warn", "error", "fatal"]"
  LogLevel[]

  Visible levels on mount; every level by default.

• onLevelFilterChange
  (levels: LogLevel[]) => void

  A level chip was turned on or off.

• query
  string

  Controlled search text.

• defaultQuerydefault ""
  string

  The search on mount. Words match anywhere in the message or source, ignoring case and diacritics; the filter runs 120ms after typing stops.

• onQueryChange
  (query: string) => void

  Every keystroke in the search.

• filterModedefault "filter"
  "filter" | "highlight"

  filter hides the lines that do not match; highlight keeps them, marks the hits and steps through them with Enter / Shift+Enter.

• regexdefault false
  boolean

  The search is a regular expression (case-insensitive). The .* toggle in the toolbar flips it; an invalid expression is marked and filters nothing.

• follow
  boolean

  Controlled following of the newest line.

• defaultFollowdefault true
  boolean

  Stick to the newest line on mount. Scrolling up pauses it by itself.

• onFollowChange
  (follow: boolean) => void

  Following paused (scroll up, a key, an opened line) or resumed (the pill, End, the toggle, scrolling to the end).

• wrap
  boolean | "auto"

  Controlled line wrapping.

• defaultWrapdefault "auto"
  boolean | "auto"

  auto wraps below 768px and keeps one line (scrolling sideways) above.

• onWrapChange
  (wrap: boolean) => void

  The wrap toggle was pressed.

• showTimestampsdefault true
  boolean

  The time column. The toolbar clock toggle flips it too.

• timeFormatdefault "time"
  "time" | "datetime" | "relative" | "iso"

  time 16:38:12.345, datetime 24.09.2026, 16:38:12, relative 2 min ago (ticking), iso as stored. Local times print after hydration.

• showLevelsdefault true
  boolean

  The 3-letter level tag (INF, WRN, ERR) in the level's tone.

• showSourcedefault true
  boolean

  The source chip ([spv], [http]), truncated at 14 characters.

• showLineNumbersdefault false
  boolean

  Line numbers that keep counting after old lines drop. They are skipped when copying text.

• ansidefault true
  boolean

  Renders ANSI colors (30 to 37, 90 to 97, backgrounds, bold, dim, italic, underline) with the tone palette; false strips them.

• expandabledefault true
  boolean

  Lines with meta open a JSON tree under them on click, tap or Enter.

• sizedefault "sm"
  "sm" | "md"

  12px text on 24px rows or 13px on 28px rows.

• heightdefault 420
  number

  Height of the log body in px.

• toolbardefault true
  boolean

  The row with search, level chips, toggles and the ⋯ menu.

• searchShortcutdefault ""
  string

  A global key that focuses the search, like mod+shift+f (shown as a hint in the field). Empty binds nothing; Ctrl+F / ⌘F always works inside the viewer.

• fileNamedefault "logs"
  string

  Download base name: logs-2026-09-24-1640.log.

• loadingdefault false
  boolean

  Skeleton rows in place of the log; the toolbar waits.

• emptyState
  ReactNode

  Replaces the built-in No logs yet state.

• now
  Date | number

  The clock for relative timestamps. Defaults to the current time, ticking every second.

• setApi
  (api: LogViewerApi) => void

  Called after mount with { append(lines), clear(), scrollToBottom(), follow(on), getLines() }. append takes a line, a string or arrays of either and batches them into one render per frame.

• localedefault ""
  string

  Counts and times. Empty uses the UIProvider locale, then the browser's.

• labels
  Partial<LogViewerLabels>

  Every string: log, search, regex, invalidRegex, levels { trace, debug, info, warn, error, fatal }, levelsGroup, wrap, timestamps, follow, live, paused, newLines(count, formatted), jumpToLatest, copy, download, clear, moreActions, actions, cancel, lines(…), errors(…), filtered(…), dropped(…), matches(index, total), previousMatch, nextMatch, empty, emptyDescription, noMatches, noMatchesDescription, clearFilters, showAll(…), details, loading, copied, copyFailed, downloaded(fileName). Pass only the keys you translate.

• classNames
  Partial<Record<"toolbar" | "search" | "chips" | "chip" | "actions" | "body" | "row" | "number" | "time" | "level" | "source" | "message" | "meta" | "jump" | "empty" | "status", string>>

  Extra classes for the inner parts.

• className
  string

  Extra classes for the root panel, merged last.

Parts

FAQ

Used in

More React data display components