import { CallToAction } from "@/components/email/call-to-action";
import { defaultTheme } from "@/components/email/theme-default";
export function CallToActionDemo() {
return (
<CallToAction
description="A focused launch message paired with one clear next step."
heading="Turn product updates into momentum"
theme={{ ...defaultTheme, containerWidth: "640px" }}
/>
);
}Installation
$ pnpm dlx shadcn@latest add @emailcn/jsx-email/call-to-action
Usage
import { CallToAction } from "@/components/email/call-to-action";<CallToAction />Examples
CTA with title and action lead
minimal
import { CallToAction } from "@/components/email/call-to-action";
export function CallToActionMinimalExampleDemo() {
return <CallToAction />;
}title and lead
import { CallToAction } from "@/components/email/call-to-action";
export function CallToActionSignoffTheEmailCnTeamExampleDemo() {
return <CallToAction signoff="The EmailCN team" />;
}secondary button
import { CallToAction } from "@/components/email/call-to-action";
export function CallToActionActionsExampleDemo() {
return (
<CallToAction
actions={[
{ href: "https://example.com", label: "Get started" },
{ href: "https://example.com/learn", label: "Learn more" },
]}
/>
);
}API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
theme | EmailTheme | defaultTheme | Renderer theme configuration. |
heading | string | "Confirm your email" | Configures the component's heading. |
description | string | - | Configures the component's description. |
signoff | string | "Thank you, the emailcn Team" | Shows the title-and-lead treatment. |
actions | Array<{ href: string; label: string }> | - | Configures up to two actions. |