Vertical workflow with brand-colored app tiles connected by a thin rail, each row showing the step name and its app and config detail.
Workflow
New payment receivedStripe · over $100
Send welcome emailGmail · template:onboarding
Create CRM pageNotion · DB:Leads
Notify #revenueSlack · with link
New here? Read the installation guide.
Import & use
import { Automation7 } from "@/components/beste/piece/automation7";
<Automation7
headerLabel="Workflow"
steps={[
{
"image": "https://oud.pics/sm/l/stripe.jpeg",
"alt": "Stripe",
"label": "New payment received",
"detail": "Stripe · over $100"
},
{
"image": "https://oud.pics/sm/l/gmail.jpeg",
"alt": "Gmail",
"label": "Send welcome email",
"detail": "Gmail · template:onboarding"
},
{
"image": "https://oud.pics/sm/l/notion.png",
"alt": "Notion",
"label": "Create CRM page",
"detail": "Notion · DB:Leads"
},
{
"image": "https://oud.pics/sm/l/slack.svg",
"alt": "Slack",
"label": "Notify #revenue",
"detail": "Slack · with link"
}
]}
/>