Email Dialog

A modal that drafts and previews a pitch to a listicle owner.

"use client";

import { MailIcon } from "lucide-react";
import { useState } from "react";
import { toast } from "sonner";

import { Button } from "@/components/ui/button";

import { OutreachEmailDialog } from "../components/outreach-email-dialog";
import {
  OUTREACH_DRAFTS,
  OUTREACH_PROSPECTS,
  OUTREACH_VARIABLES,
} from "../constants/outreach";

const [PROSPECT] = OUTREACH_PROSPECTS;

export default function OutreachEmailDialogExample() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <Button onClick={() => setOpen(true)}>
        <MailIcon data-icon="inline-start" />
        Pitch saasbase.dev
      </Button>
      <OutreachEmailDialog
        drafts={OUTREACH_DRAFTS}
        onOpenChange={setOpen}
        onSend={(prospect, draft) => {
          setOpen(false);
          toast.success(`Sent “${draft.subject}” to ${prospect.contact.name}`);
        }}
        open={open}
        prospect={PROSPECT}
        variables={OUTREACH_VARIABLES}
      />
    </>
  );
}

$ bunx --bun shadcn@latest add @notra/outreach-email-dialog

OutreachEmailDialog is a shadcn Dialog for asking a site owner to add you to their list. The subject and body take {{variables}}, which the Preview tab fills in for the prospect. Rewrite asks the model for the next draft in drafts, and Send pitch calls onSend with the filled-in email.

Prop	Default	Description
`prospect`		The listicle and its contact.
`drafts`		Subject and body templates that Rewrite cycles through.
`variables`		Insertable values. `first_name` and `listicle_title` come from the prospect.
`model`	`gpt-5`	The model shown on Rewrite.
`onSend`		Gets the prospect and the filled-in draft.

Used in

Listicle Outreach

Track the listicles AI answers cite and pitch their owners.