Variable Chips
Autocomplete variables card grouped by source (Trigger, Customer, Order) with monospaced handlebars-wrapped violet chips for each path.
Usage
The import and the props worth knowing about, in one place.
import { Automation20 } from "@/components/beste/piece/automation20";
<Automation20
surface="card"
bordered={true}
inverted={false}
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"
]
}
]}
/>More Automation pieces
View all Automation
Trigger to Action
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.
Schedule Chip
Cron-based schedule card with a sky repeat tile, human-readable cadence, monospace cron expression, next run countdown, and timezone.
- New payment receivedStripe · over $100
Send welcome emailGmail · template:onboarding
Create CRM pageNotion · DB:Leads- Notify #revenueSlack · with link
Workflow Steps
Vertical workflow with brand-colored app tiles connected by a thin rail, each row showing the step name and its app and config detail.
Loop Iterator
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.