4
Sponsor

Full Menu Footer

PreviousNext

full-menu footer with oversized-logo and bordered variants

React EmailMJML ReactJSX Email
import { FooterWithFullMenu } from "@/components/email/footer-with-full-menu";
import type { FooterWithFullMenuVariant } from "@/components/email/footer-with-full-menu";

export function FooterWithFullMenuDemo({
  variant,
}: {
  variant?: FooterWithFullMenuVariant;
}) {
  return (
    <FooterWithFullMenu
      {...FooterWithFullMenu.PreviewProps}
      variant={variant ?? FooterWithFullMenu.PreviewProps.variant}
    />
  );
}

Installation

$ pnpm dlx shadcn@latest add @emailcn/footer-with-full-menu

Usage

import { FooterWithFullMenu } from "@/components/email/footer-with-full-menu";
<FooterWithFullMenu
  {...FooterWithFullMenu.PreviewProps}
  variant="oversized-logo"
/>

Examples

Bordered

import { FooterWithFullMenu } from "@/components/email/footer-with-full-menu";
import type { FooterWithFullMenuVariant } from "@/components/email/footer-with-full-menu";

export function FooterWithFullMenuDemo({
  variant,
}: {
  variant?: FooterWithFullMenuVariant;
}) {
  return (
    <FooterWithFullMenu
      {...FooterWithFullMenu.PreviewProps}
      variant={variant ?? FooterWithFullMenu.PreviewProps.variant}
    />
  );
}

API Reference

PropTypeDefaultDescription
variant"oversized-logo" | "bordered""oversized-logo"Selects the exact layout
themeEmailThemedefaultThemeEmail theme styling