Automation Builder Page React block for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Automation Builder Page is part of Pro, with 298 more Pro items: $8 a month or $150 once. 14-day refund before you download any Pro item. See plans

Usage

Import AutomationBuilderPage from @/components/blocks/automation-builder-page.

// app/(admin)/automations/page.tsx (the shell lives in app/(admin)/layout.tsx: <AdminShell layout="fill">{children}</AdminShell>)
"use client"

import { AutomationBuilderPage, type Automation } from "@/components/blocks/automation-builder-page"

export default function AutomationsPage() {
  return (
    <AutomationBuilderPage
      height="fill"
      onToggle={async (automation: Automation, enabled: boolean) => {
        await fetch(`/api/automations/${automation.id}`, { method: "PATCH", body: JSON.stringify({ enabled }) })
      }}
      onSave={async (automation: Automation) => {
        await fetch(`/api/automations/${automation.id}`, { method: "PUT", body: JSON.stringify(automation) })
      }}
      onTest={async (automation: Automation) => {
        const response = await fetch(`/api/automations/${automation.id}/test`, { method: "POST" })
        if (!response.ok) throw new Error(await response.text())
      }}
    />
  )
}

Props

• automations
  Automation[]

  The automations, controlled ({ id, name, description?, enabled, trigger: { type: "event" | "schedule", label, cron? }, workflow: WorkflowValue, lastRun?, runs7d }); pair it with onAutomationsChange.

• defaultAutomations
  Automation[]

  The automations while uncontrolled; defaults to AUTOMATION_BUILDER_SAMPLE.automations (six Summit CRM rules). Workflows without positions are laid out on load.

• onAutomationsChange
  (automations: Automation[]) => void

  Called with the whole new list after a toggle, save, create, duplicate or delete.

• runs
  AutomationRun[]

  The run history ({ id, automationId, label?, startedAt, duration, status, trigger, error?, logs: LogLine[] }); defaults to AUTOMATION_BUILDER_SAMPLE.runs (40 runs). Test runs are added on top.

• nodeTypes
  WorkflowNodeDef[]

  The canvas step catalog (triggers, CRM actions, messages, AI, logic); defaults to AUTOMATION_NODE_TYPES. Keep it stable.

• selectedId
  string | null

  The open automation, controlled; null shows the Pick an automation placeholder.

• defaultSelectedIddefault "invoice-reminder"
  string | null

  The automation open first while uncontrolled. Phones start on the list either way.

• onSelectedIdChange
  (id: string | null) => void

  Called when a row, a create or a delete changes the open automation.

• tab
  "editor" | "history"

  The editor tab, controlled.

• defaultTabdefault "editor"
  "editor" | "history"

  The tab shown first: the workflow canvas or the run history with logs.

• onTabChange
  (tab: AutomationBuilderPageTab) => void

  Called when the tabs switch, and when a failed test or View log opens the history.

• defaultStepIddefault ""
  string

  A step id whose settings open on mount, or "trigger" for the automation's trigger (the cron picker on schedules).

• heightdefault "fill"
  "auto" | "fill" | "screen"

  fill takes what is left of an admin shell with layout="fill" and scrolls inside its panes; screen is a standalone h-dvh page; auto is as tall as the window (at least 760px) with a fixed 640px canvas.

• listWidthdefault 320
  number

  The list column in px (260 to 420); the divider drags it too.

• saveShortcutdefault "mod+s"
  string

  The key that saves the open automation, shown on the Save button; "" binds nothing.

• confirmDisabledefault false
  boolean

  Ask before switching an automation off (from the list or the editor).

• onToggle
  (automation: Automation, enabled: boolean) => (void | Promise<unknown>)

  The on / off switch, optimistic; a rejection flips it back with a toast. A 600 ms request is simulated by default.

• onSave
  (automation: Automation) => (void | Promise<unknown>)

  Save and mod+s, after validateWorkflow passes; a rejection keeps the changes with a toast. Simulated by default.

• onTest
  (automation: Automation) => (void | Promise<unknown>)

  Run a test: resolve when it passes, reject with the reason when it fails. The default takes 1.8 s and fails for QuickBooks sync with QuickBooks responded with 503.

• onCreate
  (automation: Automation) => (void | Automation | Promise<void | Automation>)

  The new automation dialog; resolve with the stored automation to replace the draft, reject to show the error in the dialog.

• onDelete
  (automation: Automation) => (void | Promise<unknown>)

  Delete from the ⋯ menu, run while the confirm dialog shows its spinner; a rejection keeps the dialog open with the error.

• onDuplicate
  (automation: Automation) => (void | Automation | Promise<void | Automation>)

  Duplicate: gets the copy (off, no history); resolve with the stored one to replace it.

• labels
  Partial<AutomationBuilderPageLabels>

  Every visible string, English by default (DEFAULT_AUTOMATION_BUILDER_PAGE_LABELS; AUTOMATION_BUILDER_PAGE_LABELS_EN is the same set). Nested keys (canvas, cronPicker, logViewer, table, list, inlineEdit) translate the composed items.

• localedefault "en-US"
  string

  Intl locale for relative times, durations, dates in the logs and the cron descriptions.

• now
  Date | number

  The reference time for relative times, test runs and next cron runs; defaults to the live clock.

• tonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  The accent of New and Save, the switches, the pressed chips, the tabs, the canvas selection and the cron picker.

• radiusdefault "md"
  "sm" | "md" | "lg"

  The canvas, the run table, the log and the alerts (12px, 16px or 24px).

• loadingdefault false
  boolean

  The list rows and the editor as skeletons.

• animateIndefault true
  boolean

  The list and the editor rise in once on mount; off in thumbnails and under reduced motion.

• linkComponentdefault "<a>"
  (props: LinkComponentProps) => ReactNode

  The router link for links inside the page; defaults to the LinkProvider's (a plain anchor).

• className
  string

  Merged onto the root.

• classNames
  Partial<Record<AutomationBuilderPageSlot, string>>

  Classes for the parts: list, editor, header, canvas, history, log, empty, newDialog.

Parts

FAQ

More React blocks