Each step runs, then a packet crosses the connector and fills it behind itself before the next step lights up, ending in a full row of checks.
The import and the props worth knowing about, in one place.
import { Automation21 } from "@/components/beste/piece/automation21";
<Automation21
steps={[
{
"label": "Webhook",
"icon": "webhook"
},
{
"label": "Filter",
"icon": "filter"
},
{
"label": "Enrich",
"icon": "sparkles"
},
{
"label": "Notify",
"icon": "send"
}
]}
tone="primary"
/>


Vertical workflow with brand-colored app tiles connected by a thin rail, each row showing the step name and its app and config detail.
Pause-step card with a dashed border, a tone-tinted timer tile, the wait duration, and a subtle continuation note.
Workflow execution log with rows for each run showing a semantic status icon, run id, duration, and relative time.
Cron-based schedule card with a sky repeat tile, human-readable cadence, monospace cron expression, next run countdown, and timezone.