MiniDev UI

Email Header

Simple 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.

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

Installation#

bash
npx shadcn@latest add @minidev/email-header

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-header.json

Usage#

tsx
import { EmailHeader } from "@/components/ui/email-header"

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

API reference#

EmailHeader props
PropTypeDefault
brandstring"MiniDev"
classNamestring-

Examples#

EmailLayouts & templates

Related email components#

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 FooterEmail footer with your company address and Unsubscribe and Preferences links, centered on a muted background. Covers what marketing emails need at the end.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