dr-ui
Blocks

Log Item

A single log record with timestamp, level, copy action, syntax-highlighted message and a collapsible stacktrace

Installation

npx shadcn@latest add @dr-ui/log-item

Registry dependencies

@dr-ui/utils
@dr-ui/i18n
@dr-ui/copy-button
@dr-ui/themed-syntax-highlighter

Dependencies

lucide-react@^1.7.0
class-variance-authority@^0.7.1

Levels

Every supported level. DEBUG/TRACE, INFO, WARN/WARNING, ERROR/CRITICAL/FATAL and SUCCESS map to five visual styles; unknown levels fall back to the info style.

2026-08-11 14:03:22.123INFO
2026-08-11 14:03:24.567WARNING
2026-08-11 14:03:25.891ERROR
2026-08-11 14:03:26.002CRITICAL
2026-08-11 14:03:26.512SUCCESS
2026-08-11 14:03:27.310AUDIT

Search highlight

A search query highlighted in the message and stacktrace. A match shows a dot after the timestamp and a matching stacktrace auto-expands. Pass the query already normalized (trimmed and lowercased).

2026-08-11 14:03:24.567WARN
2026-08-11 14:03:25.891ERROR

Stacktrace

A log record with a collapsible stacktrace. The message row toggles the stacktrace with mouse or keyboard.

2026-08-11 14:03:25.891ERROR