shadcn.io is not affiliated with official shadcn/ui
Automation Workflow Command Menu Block for React Aria
An automation tool's command menu shown open over a drawn automations page: nine automations grouped by trigger with a switch each and a live group count, and a pane that draws the highlighted one as trigger, condition and action.
Installation
Overview
See what an automation does before you switch it on with this workflow command menu for React with React Aria. It opens from the automations page in Relayhouse, an automation tool, whose header holds an outline field with its ⌘ K cap, and the page is drawn under a soft scrim inside a hairline frame with a plus mark on each corner. The menu is the catalog Command beside a pane: nine automations grouped by what starts them (Schedule, Event, Webhook), each with a Switch and the group's heading counting how many are on ("2 of 3 on"). The pane follows the highlighted automation and draws it as three steps, trigger, condition and action, joined by arrows, with the same thing in a sentence; on a phone the steps stack one to a line and the pane sits under the list. Enter turns the automation on or off and the drawn page behind follows. For preview the menu is drawn open in place when the page loads; the field, or Ctrl or ⌘ K while focus is in the block, opens the real command dialog with the same automations and query. For automation builders, rules engines and any admin screen where a switch needs context.
FAQ
Why is the menu already open, and what do I keep?
So you can see it without a click. On load the menu is the Command drawn inline over a picture of an automations page, in a plain shell that is not modal, so nothing is trapped, hidden or focused and the page around the preview keeps working. The header's field opens the real command dialog, modal, with its focus trap, Escape and focus return, and the inline copy stays closed until a reload. Both show the same Palette and share the block's state, so a switch or a query in the copy is in the dialog. In your app keep the dialog and drop the copy: the "in-place" state, the scrim with its shell and the Escape and blur effects.
How do the switches work?
The row is the control: Enter, or a click anywhere on it, turns the automation on or off. The switch at its end is a picture of the state, so it is inert and hidden from assistive technology, and the state is read out in the row's text ("Monday digest, Monday 08:00, on"). The status line says what changed, and the group heading's count and the drawn page behind both follow.
How is the flow drawn?
As three steps in a list, each with its kind as a word (Trigger, Condition, Action) over a short phrase, joined by two hand-drawn SVG arrows that point down on a phone and along the line otherwise, and mirror in right-to-left pages. The sentence under them says the same in full. The pane has a fixed height, so moving through the list never moves it. React Aria has no highlight event, so the block reads the input's aria-activedescendant and the hovered row.
Does the group count follow the search?
No, it counts the whole group: "2 of 3 on" stays true while the search hides a row, and it changes the moment a switch does. The foot counts the rows shown.
What stays local, and how do I wire it?
All of it. The nine automations and their steps are constants in START, and a switch changes local state only: nothing runs or is scheduled. In your app save the flag in pick with your API, roll the row back and say so if the save fails, and generate the steps and the sentence from the automation's definition.
Is it accessible from the keyboard?
Yes. Type to search, the arrow keys move through the rows and the pane follows, and Enter turns the automation on or off. Escape closes the menu with focus on the field, and Ctrl or ⌘ K opens the dialog while focus is inside the block, and only then. The rows and the empty state are menuitems of a React Aria menu inside an autocomplete; nothing is highlighted until you press an arrow key. The pane shows the first automation until you press an arrow key.