Trigger to Action

Component 34

About

A two-step automation recipe card that stacks a "When" trigger row and a "Then" action row connected by a downward arrow, each with a brand-colored app icon tile and event label.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Trigger to Action to your project and fits it to your theme.

Code

How Trigger to Action is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { Automation1 } from "@/components/ui/automation1";

export default function Default() {
  return (
    <Automation1
      triggerLabel="When"
      actionLabel="Then"
      trigger={{
        src: "https://cdn.21st.dev/assets/mirror/01/0108420672db82510ef69d7aa278b58e98df3eecb5e6979e321e6e4d15706ff4.jpg",
        alt: "Stripe",
        event: "Payment received",
      }}
      action={{
        src: "https://cdn.21st.dev/assets/mirror/89/89133ad724dd7585e95efb716bf631c5e87573e1f2305f018b70f6bbf0e832e4.svg",
        alt: "Slack",
        event: "Send #revenue alert",
      }}
    />
  );
}