Version Tags
Workflow version history with a colored status dot, monospace tag, emerald active, amber draft, and muted archived pills, and author with date on the right.
Usage
The import and the props worth knowing about, in one place.
import { Automation19 } from "@/components/beste/piece/automation19";
<Automation19
surface="card"
bordered={true}
inverted={false}
heading="Versions"
versions={[
{
"tag": "v3",
"status": "active",
"date": "Apr 20",
"author": "Ada L."
},
{
"tag": "v2",
"status": "draft",
"date": "Apr 14",
"author": "Marcus R."
},
{
"tag": "v1",
"status": "archived",
"date": "Mar 30",
"author": "Priya S."
}
]}
activeLabel="Active"
draftLabel="Draft"
archivedLabel="Archived"
/>More Automation pieces
View all Automation
Workflow Node
Single workflow step card with a kind-colored icon header (trigger, action, filter), the app/event label, configured field rows, and a configure footer.
{
"id": "evt_8a2k4f",
"type": "payment.succeeded",
"amount": 4200,
"currency": "usd"
}Test Result
Workflow test preview with a semantic status check, HTTP status code, duration, and a monospaced JSON response body panel below.
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.
Run Stats
Seven-day workflow health card with stacked emerald success and rose failure bars, a success rate headline, and totals footer.