Email Footer

Email footer with your company address and Unsubscribe and Preferences links, centered on a muted background. Covers what marketing emails need at the end.

src/registry/ui/email-footer.tsx/r/email-footer.json

Installation#

bash

npx shadcn@latest add @minidev/email-footer

MiniDev UI is in the shadcn registry directory, so the short form works with no setup. Older CLI versions can use the full URL: npx shadcn@latest add https://ui.minidev.pro/r/email-footer.json

Usage#

tsx

import { EmailFooter } from "@/components/ui/email-footer"

export function Example() {
  return (
    <EmailFooter />
  )
}

API reference#

EmailFooter props
Prop	Type	Default
`address`	`string`	`"MiniDev · San Francisco"`
`className`	`string`	`-`

Dependencies#

npm

React only

Built from

Link

Examples#

EmailLayouts & templates

Email ButtonSolid link button for email templates with a fixed height, padding and rounded corners. Uses an anchor so it survives email clients that strip buttons.Email CardContent card for transactional emails with an optional title and body text, inset from the email edges. Use it for receipts, codes and highlights.Email HeaderSimple email header band that shows your brand name on a muted background with a bottom border. Sits at the top of the email layout in React templates.Email LayoutEmail layout shell with a centered 560px column, rounded border and surface background. Compose it with the email header, cards, button and footer.Email Preview FrameInbox style preview frame showing the sender and subject above the rendered email body. Handy for template galleries and email settings screens.Email ReceiptA payment receipt email in a preview frame with a branded header, plan and tax line items, a bold total and a footer. A React starting point for billing mail.

All email templates

Learn more

All footers3 blocks