shadcn.io is not affiliated with official shadcn/ui
Event Stream Changelog Block for React
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 Base 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.
Related
- Pro
Alert Rules Changelog
Incidents and uptimeSix changed alert rules as cells on shared hairlines, each with a threshold track showing the old marker hollow and the new one solid, the figures in words, the channels it reaches and its severity, with a channel toggle that steps back the rules that never reach it.
- $Pro
CLI Output Changelog
APIs and integrationsOne command in a terminal window whose output switches between text, JSON and Markdown over the same five releases, with a Copy button for the command and an exit status.
- Pro
Webhook Events Changelog
APIs and integrationsSix webhook events as accordion rows with a New, Updated or Deprecated tag, a filter with counts, and an example payload with a Copy button in each row.
- Pro
Commit Log Changelog
Code and commitsA git log of seven commits: a short hash with a Copy button for the full one, the commit type as a word, the message, an initials avatar and the day, with a Branch Select that swaps the list.
- Pro
Split Status Page
Incidents and uptimeA split status page for a hosted status service: the 90-day uptime and four components with their state at the start, the three most recent releases at the end, and a divider between them.
- Pro
Tabbed Feed Infrastructure Changes
Data and configAn infrastructure change feed with tabs (All, Compute, Storage, Network): each row a change tag with an icon and a word, the service in mono, a struck-through from value, an arrow and the new value, and the day, in an inset frame.