shadcn.io is not affiliated with official shadcn/ui
Event Log Timeline Block for Solid
A service event log on a rail with severity as a glyph and a word, and a simulated tail: Start the tail releases eight events one every 1.2 seconds, Pause holds them with a count of new events, and Resume appends them.
Installation
Overview
Follow a service as it logs, and hold the stream still while you read, with this event log timeline for Solid with Ark UI. It is written for Tailrow, a fictional event streaming service. A hairline frame with a plus mark on each corner holds a control band and a fixed-height log region on a vertical rail, newest at the bottom. Ten events are there to begin with; each has its time, a severity shown as a glyph and a word (Info, Warn, Error, never colour alone), the part of the service it came from in mono and the message. "Start the tail" releases eight more typed events, one every 1.2 seconds, and keeps the region scrolled to the newest. "Pause" holds the log where it is while events keep arriving, and a pill counts them ("3 new events"); "Resume" appends them at once. "Start over" returns to the first ten. The region is a log that a screen reader announces as it grows, a focusable scroll region you can use from the keyboard, and the pill's place is reserved so the controls do not move. Under reduced motion new events appear without the fade. It is built from Button, Badge, Guides and lucide icons. For service consoles, deploy logs and monitoring panes. The events are simulated and say so.
FAQ
How do I change the events?
Edit FIRST (the events already in the log) and QUEUED (the ones the tail releases) at the top of the file. Each is one event(...) line with an id, a time of day, a level (info, warn or error), a source and the message. The counts, the pill and the status line are derived. The date is one constant, DAY.
How does the tail work, and is anything running in the background?
Pressing "Start the tail" starts one timer at a time: a 1.2 second timeout releases the next event and sets the next one, and it stops when the eight are out. The timers are cleared when you leave the page. Nothing loops by itself and no timer starts until you press the button. The events are simulated: nothing is read from a server.
What does Pause do to events that arrive?
They keep arriving, but the log shows only what was there when you paused. The pill counts the events held back, and Resume appends them all at once. While paused the status line says how many are shown and how many are held.
What stays in the page, and how do I tail a real stream?
Everything. To tail a real stream, push events into the same list from your transport (server-sent events or a socket) and keep the paused count as it is here: when paused, hold your own buffer instead of the display list. Keep the region as the only live area so screen readers hear each new line once.
Is it accessible?
The log is a region with the log role and a name, so new entries are announced politely, and you can focus it and scroll by keyboard. Severity is a glyph and a word. The start, pause and resume control is one button whose label changes, and the status line is a polite live region that is there from load.