shadcn.io is not affiliated with official shadcn/ui
No Automations Empty State Block for React
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 React with Base 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.
Related
- Pro
A full-height first-workflow screen for a pipeline builder: three drawn nodes (a trigger, a step, an output) that turn solid as you pick an option for each, a sentence that writes itself, and one Create workflow button.
- Pro
No Webhooks Empty State
Developer toolsAn event relay's empty endpoint list as a builder: a URL, four events to tick, a code window with the JSON body and a curl command, and one Add endpoint button that lists the endpoint and sends a simulated test event.
- Pro
No Reminders Empty State
Calendar and timeA reminders app with nothing set: a Remind me popover drawn open over a note with three empty slots, an hourglass whose sand has not fallen, a field and three presets that write a day and time, and one Set reminder button.
- Pro
No Tasks Empty State
Projects and tasksAn empty three-column task board: dashed slots in To do, Doing and Done, an Add task in each column that opens an inline field, a select on each card to move it, and a message band with a drawn field of slots and one button.
- Pro
A custom fields page with none yet: a row of five field types, a label input with a live drawing of the control, and a sketch of the contact form where each added field fills the next dashed slot.
- Pro
Notification Preferences Settings
NotificationsA notification settings panel: a channel strip with all-or-nothing checkboxes, a matrix of switches by activity and channel with a locked security email, quiet hours, and a save bar that counts unsaved changes.