Autocomplete variables card grouped by source (Trigger, Customer, Order) with monospaced handlebars-wrapped violet chips for each path.
New here? Read the installation guide.
import { Automation20 } from "@/components/beste/piece/automation20";
<Automation20
heading="Available variables"
groups={[
{
"label": "Trigger",
"variables": [
"event.id",
"event.type",
"event.created_at"
]
},
{
"label": "Customer",
"variables": [
"customer.email",
"customer.name",
"customer.plan"
]
},
{
"label": "Order",
"variables": [
"order.total",
"order.currency"
]
}
]}
/>
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.
Cron-based schedule card with a sky repeat tile, human-readable cadence, monospace cron expression, next run countdown, and timezone.



Vertical workflow with brand-colored app tiles connected by a thin rail, each row showing the step name and its app and config detail.
For-each loop card with a tone repeat tile, source expression, current/total counter, tone progress bar, and a sample value from the current iteration.