shadcn.io is not affiliated with official shadcn/ui
No Automations Empty State Block for Solid
An automations page with no rules: one sentence you finish with three selects (a trigger, a priority, an action), a count of how often it would have run on fourteen sample events, a row of dominoes that fall, and one Create automation button.
Installation
Overview
Show the first rule an automations page will hold, with this no automations empty state for Solid with Ark UI. A header sits over one framed panel for Chainfall, a task tool. The first band is a single sentence you complete with three Native Selects: "When a task is created and priority is high, then notify the owner", each clause with its own label and stacked on a phone. The second band is a row of six dominoes, five standing and the sixth only dashed, beside two figures: how many times the rule would have run on fourteen typed sample events from 25 Sep to 8 Oct, worked out from the three selects, and how many times it has run, which is none. The Shine Button, the only colored control, creates the automation: the sixth domino turns solid, the first five topple onto it once, and the sentence freezes as Automation 1. The frame's corners and band rules come from Guides, and the whole block uses CSS transitions only.
FAQ
What happens when I press Create automation, and what stays in the page?
The rule is kept in the page's state: the sentence locks, the heading becomes "Automation 1", the count reads "1 automation, on" and the dominoes fall. Nothing is saved and nothing ever runs; "Has run" stays at 0 times. Start over stands the dominoes up and unlocks the sentence. To wire it for real, send the three values to your API where the code says so.
Where does the 'Would have run' figure come from?
From fourteen typed sample events, each with a day, a kind and a priority. The figure is the number of events that match the chosen trigger and priority, so changing a clause changes it; the action does not. The window of days, 25 Sep to 8 Oct, is typed too, never read from the clock. With your own data, count the matching events of the last two weeks.
Why native selects and not the custom Select?
Each clause is a short list inside a sentence, so the browser's own select is the quickest and most accessible control: it opens a native menu on a phone, takes the keyboard without a script and is named by the visible word beside it (When, and, then). The wording of the options lives in three typed lists you can replace.