Variable Chips

Autocomplete variables card grouped by source (Trigger, Customer, Order) with monospaced handlebars-wrapped violet chips for each path.

Available variables
Trigger
{{event.id}}{{event.type}}{{event.created_at}}
Customer
{{customer.email}}{{customer.name}}{{customer.plan}}
Order
{{order.total}}{{order.currency}}

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use
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"
      ]
    }
  ]}
/>