Email Receipt

Motion

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

src/registry/premium/email-receipt.tsx/r/email-receipt.json

Installation#

bash

npx shadcn@latest add @minidev/email-receipt

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

Usage#

tsx

import { EmailReceipt } from "@/components/ui/email-receipt"

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

API reference#

EmailReceipt props
Prop	Type	Default
`className`	`string`	`-`

Dependencies#

npm

React only

Built from

Email Footer Email Header Email Layout Email Preview Frame Separator

Examples#

EmailLayouts & templates

Email WelcomeA React welcome email template in a preview frame with a branded header, intro copy, a call to action button, a quick start card and a standard footer.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 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.

All email templates