Composition and API
Pass log entries through the entries prop as an array of { level, timestamp, message, meta?, stack? } objects, where level is error, warn, info, debug, or verbose. Each level renders with its own color-coded badge background and foreground. The showHeader prop toggles the filter bar; within it, enableClipboard toggles the copy button and enableSearch toggles the text search input. showSummary toggles the footer count. appearance switches between default, subtle, contrast, and glass chrome, and size controls the font scale. The separate animated entry adds fade and stagger reveal presets for the body.
Accessibility
The filter buttons, copy control, and search input are real interactive elements. The timestamp and level badge are presentational text with no interactive role. Every element carries data-slot attributes for styling and testing, and each entry exposes a data-level attribute reflecting its severity. Color pairs meet contrast on their surfaces; the animated entry's motion is short and easing-based, so pair it with prefers-reduced-motion handling in your app where needed.
Next.js integration notes
The static LogViewer entry ships no framer-motion and is safe in any Server or Client Component tree (it is a Client Component because the filter/search/copy controls manage local state). The animated LogViewerAnimated entry imports framer-motion, which is an optional peer dependency. Both render deterministically from the same entries, so server and client output match and there is no hydration mismatch.
FAQ
How do I distinguish log levels visually?
Each entry carries a level badge rendered with its own color palette: error is red, warn is yellow, info is blue, debug is slate, and verbose is purple. All colors are driven by --zui-log-viewer-* CSS variables you can override.
Can I filter to show only certain levels?
Yes. The header bar renders a toggle button for each level. Click a button to hide that level from the list; at least one level must remain active. You can also set defaultActiveLevels to control the initial filter set.
Do I need framer-motion?
Only for the animated entry. The default import from @zentauri-ui/zentauri-components/ui/log-viewer is framer-motion-free. Import LogViewerAnimated from the /animated subpath when you want the fade or stagger reveal, and install framer-motion as a peer dependency.
How do I theme the log level colors?
Override the --zui-log-viewer-* CSS variables (bg, fg, border, header, filter colors, search colors, per-level badge colors, and more) on :root, a theme selector, or a wrapper. Each variable ships a light fallback and a paired -dark variant for dark mode.