5
Sponsor

Promotion

PreviousNext

Promotion Footer rendered with email-safe, renderer-native components.

React EmailMJML ReactJSX Email
Open preview in new tab
import { PromotionFooter } from "@/components/email/promotion-footer";
import { defaultTheme } from "@/components/email/theme-default";

export function PromotionFooterDemo() {
  return (
    <PromotionFooter
      placement="inline"
      alignment="center"
      menuColumns={0}
      theme={{ ...defaultTheme, containerWidth: "640px" }}
    />
  );
}

Installation

$ pnpm dlx shadcn@latest add @emailcn/react-email/promotion-footer

Usage

import { PromotionFooter } from "@/components/email/promotion-footer";
<PromotionFooter placement="inline" alignment="center" menuColumns={0} />

Examples

Footer with content and CTA

left

Open preview in new tab
import { PromotionFooter } from "@/components/email/promotion-footer";

export function PromotionFooterPlacementInlineAlignmentLeftExampleDemo() {
  return <PromotionFooter placement="inline" alignment="left" />;
}

center

Open preview in new tab
import { PromotionFooter } from "@/components/email/promotion-footer";

export function PromotionFooterPlacementInlineAlignmentCenterMenuColumns0ExampleDemo() {
  return (
    <PromotionFooter placement="inline" alignment="center" menuColumns={0} />
  );
}

right

Open preview in new tab
import { PromotionFooter } from "@/components/email/promotion-footer";

export function PromotionFooterPlacementInlineAlignmentRightExampleDemo() {
  return <PromotionFooter placement="inline" alignment="right" />;
}

Footer with large title and buttons

default

Open preview in new tab
import { PromotionFooter } from "@/components/email/promotion-footer";

export function PromotionFooterPlacementLargeTitleExampleDemo() {
  return <PromotionFooter placement="large-title" />;
}

Footer with menu and full-width CTA

default

Open preview in new tab
import { PromotionFooter } from "@/components/email/promotion-footer";

export function PromotionFooterPlacementFullWidthExampleDemo() {
  return <PromotionFooter placement="full-width" />;
}

Footer with overlapped CTA

Open preview in new tab
import { PromotionFooter } from "@/components/email/promotion-footer";

export function PromotionFooterPlacementOverlapVariantContentLogoPositionLeftExampleDemo() {
  return (
    <PromotionFooter
      placement="overlap"
      variant="content"
      logoPosition="left"
    />
  );
}
Open preview in new tab
import { PromotionFooter } from "@/components/email/promotion-footer";

export function PromotionFooterPlacementOverlapVariantContentLogoPositionRightExampleDemo() {
  return (
    <PromotionFooter
      placement="overlap"
      variant="content"
      logoPosition="right"
    />
  );
}
Open preview in new tab
import { PromotionFooter } from "@/components/email/promotion-footer";

export function PromotionFooterPlacementOverlapVariant2ColumnMenuLogoPositionLeftExampleDemo() {
  return (
    <PromotionFooter
      placement="overlap"
      variant="2-column-menu"
      logoPosition="left"
    />
  );
}
Open preview in new tab
import { PromotionFooter } from "@/components/email/promotion-footer";

export function PromotionFooterPlacementOverlapVariant2ColumnMenuLogoPositionRightExampleDemo() {
  return (
    <PromotionFooter
      placement="overlap"
      variant="2-column-menu"
      logoPosition="right"
    />
  );
}
Open preview in new tab
import { PromotionFooter } from "@/components/email/promotion-footer";

export function PromotionFooterPlacementOverlapVariant3ColumnMenuLogoPositionLeftExampleDemo() {
  return (
    <PromotionFooter
      placement="overlap"
      variant="3-column-menu"
      logoPosition="left"
    />
  );
}
Open preview in new tab
import { PromotionFooter } from "@/components/email/promotion-footer";

export function PromotionFooterPlacementOverlapVariant3ColumnMenuLogoPositionRightExampleDemo() {
  return (
    <PromotionFooter
      placement="overlap"
      variant="3-column-menu"
      logoPosition="right"
    />
  );
}
Open preview in new tab
import { PromotionFooter } from "@/components/email/promotion-footer";

export function PromotionFooterPlacementOverlapVariantAddressLogoPositionLeftExampleDemo() {
  return (
    <PromotionFooter
      placement="overlap"
      variant="address"
      logoPosition="left"
    />
  );
}
Open preview in new tab
import { PromotionFooter } from "@/components/email/promotion-footer";

export function PromotionFooterPlacementOverlapVariantAddressLogoPositionRightExampleDemo() {
  return (
    <PromotionFooter
      placement="overlap"
      variant="address"
      logoPosition="right"
    />
  );
}

centered content

Open preview in new tab
import { PromotionFooter } from "@/components/email/promotion-footer";

export function PromotionFooterPlacementOverlapVariantCenteredContentLogoPositionLeftExampleDemo() {
  return (
    <PromotionFooter
      placement="overlap"
      variant="centered-content"
      logoPosition="left"
    />
  );
}

centered menu

Open preview in new tab
import { PromotionFooter } from "@/components/email/promotion-footer";

export function PromotionFooterPlacementOverlapVariantCenteredMenuLogoPositionLeftExampleDemo() {
  return (
    <PromotionFooter
      placement="overlap"
      variant="centered-menu"
      logoPosition="left"
    />
  );
}

centered socials

Open preview in new tab
import { PromotionFooter } from "@/components/email/promotion-footer";

export function PromotionFooterPlacementOverlapVariantCenteredSocialsLogoPositionLeftExampleDemo() {
  return (
    <PromotionFooter
      placement="overlap"
      variant="centered-socials"
      logoPosition="left"
    />
  );
}

API Reference

PropTypeDefaultDescription
themeEmailThemedefaultThemeRenderer theme configuration.
brand{ logo: { src: string; alt?: string }; href?: string }-Configures the component's brand.
headingstring"Start sending professionally\ndesigned emails today"Configures the component's heading.
descriptionstring-Configures the component's description.
actionsArray<{ href: string; label: string }>-Configures the component's actions.
legal{ copyright?: string; text?: string; unsubscribeHref?: string; preferencesHref?: string }-Configures the component's legal.
placement"inline" | "full-width" | "overlap" | "large-title""inline"Configures the component's placement.
menuColumns0 | 2 | 30Configures the component's menucolumns.
alignment"left" | "center" | "right""center"Configures the component's alignment.
logoPosition"left" | "right""left"Positions the logo in overlapping layouts.
backgroundImage{ src: string; alt?: string }-Configures the component's backgroundimage.
variant"centered" | "left-aligned" | "right-aligned" | "content" | "2-column-menu" | "3-column-menu" | "centered-content" | "centered-menu" | "address" | "centered-socials"Derived from the other propsSelects an exact legacy composition when needed.