
Two-step recipe stacked vertically with a When trigger row, a downward arrow connector, and a Then action row, each with a brand-colored icon tile and event label.
The import and the props worth knowing about, in one place.
import { Automation1 } from "@/components/beste/piece/automation1";
<Automation1
surface="card"
bordered={true}
inverted={false}
triggerLabel="When"
actionLabel="Then"
trigger={{
"src": "https://oud.pics/sm/l/stripe.jpeg",
"alt": "Stripe",
"event": "Payment received"
}}
action={{
"src": "https://oud.pics/sm/l/slack.svg",
"alt": "Slack",
"event": "Send #revenue alert"
}}
/>


Vertical workflow with brand-colored app tiles connected by a thin rail, each row showing the step name and its app and config detail.

Single workflow step card with a kind-colored icon header (trigger, action, filter), the app/event label, configured field rows, and a configure footer.
Autocomplete variables card grouped by source (Trigger, Customer, Order) with monospaced handlebars-wrapped violet chips for each path.

Posts a message in #revenue when a payment over $500 lands.
Workflow row card with a zap icon, name, description, and a tone-colored on/off switch on the right plus an active/paused label and runs-today count.