shadcn.io is not affiliated with official shadcn/ui
Event Stream Changelog Block for Radix UI
A split with a divider: a dark terminal window that plays a twelve-event log once, with the event type in words at the start of every line, and at the start the event types with their counts and a Replay button.
Installation
Overview
An event-stream changelog for React with Radix UI, written for Eventmoor, a fictional event-bus product. The block is a split with a divider. At the end a framed terminal window sits on the page's lines: a title bar with the command that produced it, then a log of twelve events that arrive one at a time and stop (the box holds eight lines; each starts with its type in words: [DEPLOY], [CONFIG], [ALERT]). At the start: the title, and a list of the event types with their counts, tallied from the same log, and a ghost Replay button that plays it again. Hovering the log or tabbing into it holds it still, and every line is also in an unseen list for screen readers. The window stays dark like any terminal; everything around it follows your theme. On a phone the log comes straight after the title. It's built from Log Stream Text, Button and Guides, with CSS transitions for the entrance. For release feeds, operations pages and any changelog that wants to show what the system did. The events are example data.
FAQ
How do I change the events?
Edit LOG at the top of the file: one string per event, in arrival order, each starting with its tag in square brackets. The counts in the list come from the same strings, tallied by their tags, and the kinds (DEPLOY, CONFIG, ALERT) sit above it with an icon and a label. The log's speed, its number of rows and its start time are props on the Log Stream Text.
Why does the log play once?
It is set not to loop: the window starts with eight lines, the remaining four arrive one every 0.9 seconds and it stops. Replay mounts it again from the start. Moving content you can't stop is a barrier, so hovering it or tabbing into it holds it still, and everything it shows is also in a list.
What does a screen reader get?
The window is a labelled log region that doesn't announce each line as it arrives. The whole log is an unseen ordered list, "All twelve events", so every line can be read in order at once, and Replay announces itself politely when it restarts.
Why is the window dark in a light theme?
A terminal is dark by nature, so the window keeps a dark scope, with a comment in the code saying so. Event types are told apart by their words ([DEPLOY], [CONFIG], [ALERT]) and not by colour, so the log reads the same either way.
How does it fit on a phone and in a right-to-left layout?
Below lg the split stacks, with the title first, then the window and then the counts and Replay; a rule is drawn between the title and the log. Long lines are cut with an ellipsis inside the window. The log keeps its left-to-right direction in a right-to-left layout, since terminal output doesn't mirror.