shadcn.io is not affiliated with official shadcn/ui
Workflow Automation Changelog Block for React
A Tabs of three changed automation rules, each drawn as a trigger, conditions and actions flow of three cells joined by arrows, with runs, success rate and duration that roll.
Installation
Overview
A workflow-automation changelog for React with Base UI, written for Autoloom, a fictional workflow automation tool. A start-aligned header sits over an inset frame with a + on each corner whose first row is a tab list of three rules. The panel under it is the rule as a flow of three cells on shared hairlines, Trigger, Conditions and Actions, joined by arrows (and by + marks where the hairlines meet the tab bar): each cell has an icon and a word, a title, the rule in mono and, on the one cell that was edited, a Changed tag with a glyph; a line under the flow says when it was edited and what changed. Beneath it, a row of three figures for the last seven days (runs, success rate, average duration) rolls to the chosen rule's numbers. Every rule's panel sits unseen in the same cell, so the frame keeps its height when you switch. On a phone the flow is vertical with arrows pointing down. It's built from Tabs, Badge, Sliding Number and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For automation platforms, workflow builders and release notes about rules. The rules and figures are example data.
FAQ
How do I change the rules?
Edit RULES at the top of the file. A rule has an id, a name, three nodes (a kind of TRIGGER, CONDITIONS or ACTIONS, a title, its lines and changed), an edited day as an ISO date, a note on what the edit did and the three figures: runs, success and seconds. The tabs, the flow and the figures all come from that list.
How is the edited step told apart without colour?
By a Changed tag with a pencil glyph and the word on that cell only. The note under the flow says in words what the edit was and when.
Why do the figures roll, and are they read aloud?
The digits roll to the chosen rule's numbers when you switch tabs. The rolling digits are decorative and hidden from assistive technology; each figure is also written once in words ("12480 runs", "99.2 percent", "1.4 seconds") for screen readers.
Does the frame change height between rules?
No. Every rule's panel is drawn again, unseen and not reachable, in the same grid cell as the live one, so the cell is as tall as the tallest rule. Only the live panel is in the accessibility tree.
How does it work with a keyboard?
The tab list is one tab stop and the arrow keys move between the rules, showing each one's flow. Tab then goes on to the next part of the page.
How does it fit on a phone and in a right-to-left layout?
On a phone the three cells stack with arrows pointing down between them and the tab list scrolls sideways if the names do not fit. In a right-to-left layout the arrows between cells mirror and the flow reads from the right, while rules and figures keep their left-to-right text.
Related
- Pro
Steps Chain Release Approval Flow
Deploys and rolloutsA release sign-off split: a summary of the release at the start, and a vertical approval chain at the end with people, states and times, an Approve button that advances it in the demo, a progress bar and a Deploy button that gives a stated demo result.
- Pro
Build Pipeline Matrix Changelog
Deploys and rolloutsA run-by-stage matrix of the last six builds with a result and a time in every cell, a failed run that explains itself, and a stage lens that tints a column.
- 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
Feature Flag History Changelog
Deploys and rolloutsA framed table of flag changes with each state drawn as a switch and a word, a rollout bar with its share in words, and the audience rule in a popover.
- Pro
Rollback Wizard Changelog
Deploys and rolloutsA three-step rollback wizard in one framed window: pick a previous release, review what reverts and what stays, then type the version to unlock a Shine Button that opens an alert dialog and ends on a stated demo result.
- Pro
Event Stream Changelog
Deploys and rolloutsA 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.