shadcn.io is not affiliated with official shadcn/ui
Log Viewer File Upload Block for Radix UI
A log inspection window: a rail of level toggles with counts, a search that filters and marks matches, a Wrap lines switch, mono lines with numbers and times, a status of how many lines show, and a Jump to first error button.
Installation
Overview
Find the failing request in a wall of log lines, with this log viewer window for React with Radix UI. It is Spoolwise, log inspection for a small ops team. A rail of level toggles (Error, Warn, Info and Debug, each with its count) comes from a Toggle Group; a search Input filters the sixty typed gateway lines and marks every match; a Switch wraps long lines. Lines show their number, time, level and message in monospace and follow the theme. The status line says "41 of 60 lines", and the one Shine Button jumps to the first visible error, turning Error back on if it was off. A File Upload strip lists a chosen .log file by name and size. The window is framed by Guides, with a CSS entrance only. For ops dashboards, CI viewers and support tools.
FAQ
How do the filters combine?
A line shows when its level is on and its message contains the search text, ignoring case. With every level off, or a search that finds nothing, a message takes the lines' place and the window keeps its height.
What does Jump to first error do?
It finds the first error that is visible under the search, turns Error on if it was off, scrolls the lines so it sits near the top and moves focus to it, marking it as current. If the search hides every error it says so.
What stays local in this demo?
The sixty lines are generated from typed templates with fixed times, and a chosen or dropped log file is listed by name and size and never read.
How do I show a real log?
Replace LINES with parsed lines of your own (n, time, level, text) or stream them in, and keep the filtering and marking. For very long logs render only the rows in view.