shadcn.io is not affiliated with official shadcn/ui
Workflow Automation Changelog Block for Solid
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 Solid with Ark 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.