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.

Workflow
  1. Stripe
    New payment receivedStripe · over $100
  2. Gmail
    Send welcome emailGmail · template:onboarding
  3. Notion
    Create CRM pageNotion · DB:Leads
  4. Slack
    Notify #revenueSlack · with link

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

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