Application Log Viewer

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/devtools/devtools15.tsx instead.

Usage

The file also exports devtools15Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Devtools15, devtools15Demo } from "@/components/blocks/devtools/devtools15";

export default function Page() {
  return <Devtools15 {...devtools15Demo} />;
}

Props

Types

type LogLevel = "INFO" | "WARN" | "ERROR" | "DEBUG";

type LogLine = {
  id: string;
  level: LogLevel;
  timestamp: string;
  source: string;
  message: string;
};

Behavior notes

• The level filter row is genuinely functional ("use client" with real useState): clicking a level shows only lines at that level, or all lines for "All". Filtering happens entirely against the lines already passed in; there is no live tailing or streaming.
• Level tag color is fixed by level value (INFO=sky, WARN=amber, ERROR=red, DEBUG=neutral/muted) and is not configurable per-line beyond changing level.
• The dark terminal panel is a deliberate exception to the site's semantic color tokens, matching the repo's established terminal-window convention, and stays dark regardless of site theme.
• The log panel scrolls internally (max-h-[520px] with overflow-y-auto) once lines exceed the visible height, rather than growing the section indefinitely.
• When a filter has no matching lines, the panel renders a single "# no log lines match this filter" placeholder line instead of an empty panel.
• timestamp is a plain display string with no date component in the demo data (just a clock time), and is not derived from a real Date.