MiniDev UI

Email Card

Content card for transactional emails with an optional title and body text, inset from the email edges. Use it for receipts, codes and highlights.

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

Installation#

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

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

Usage#

tsx
import { EmailCard } from "@/components/ui/email-card"

export function Example() {
  return (
    <EmailCard title="Did not request this?">Ignore this message — your account stays unchanged.</EmailCard>
  )
}

API reference#

EmailCard props
PropTypeDefault
titlestring-
children*React.ReactNode-
classNamestring-

* required

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