Marketing
- Content
- Footer with Legal Text
- Company Locations Footer
- App Store Buttons Footer
- Background Image Footer
- Overlapped CTA Footer
- Large Title and Buttons Footer
- Full Menu Footer
- Centered with Menu and Socials
- 2-Column Menu
- 2-Column Menu and Divider
- Menu and Full-Width CTA
- 3-Column Menu
- Content and CTA
- Social Icons and Address
- Text, Menu and Socials
- Simple Footer with Social Icons
Ecommerce
import { FooterWithAppStoreButtons } from "@/components/email/footer-with-app-store-buttons";
import type { FooterWithAppStoreButtonsVariant } from "@/components/email/footer-with-app-store-buttons";
export function FooterWithAppStoreButtonsDemo({
variant = "centered",
}: {
variant?: FooterWithAppStoreButtonsVariant;
}) {
return (
<FooterWithAppStoreButtons
{...FooterWithAppStoreButtons.PreviewProps}
variant={variant}
/>
);
}Installation
$ pnpm dlx shadcn@latest add @emailcn/footer-with-app-store-buttons
Usage
import { FooterWithAppStoreButtons } from "@/components/email/footer-with-app-store-buttons";<FooterWithAppStoreButtons
{...FooterWithAppStoreButtons.PreviewProps}
variant="centered"
/>Examples
Two Columns
import { FooterWithAppStoreButtons } from "@/components/email/footer-with-app-store-buttons";
import type { FooterWithAppStoreButtonsVariant } from "@/components/email/footer-with-app-store-buttons";
export function FooterWithAppStoreButtonsDemo({
variant = "centered",
}: {
variant?: FooterWithAppStoreButtonsVariant;
}) {
return (
<FooterWithAppStoreButtons
{...FooterWithAppStoreButtons.PreviewProps}
variant={variant}
/>
);
}Footer With Title
import { FooterWithAppStoreButtons } from "@/components/email/footer-with-app-store-buttons";
import type { FooterWithAppStoreButtonsVariant } from "@/components/email/footer-with-app-store-buttons";
export function FooterWithAppStoreButtonsDemo({
variant = "centered",
}: {
variant?: FooterWithAppStoreButtonsVariant;
}) {
return (
<FooterWithAppStoreButtons
{...FooterWithAppStoreButtons.PreviewProps}
variant={variant}
/>
);
}API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "centered" | "two-columns" | "with-title" | "centered" | Selects the layout |
theme | EmailTheme | default theme | Email theme styling |