Email Layout

Email layout shell with a centered 560px column, rounded border and surface background. Compose it with the email header, cards, button and footer.

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

Installation#

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

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

Usage#

tsx
import { EmailLayout } from "@/components/ui/email-layout"

export function Example() {
  return (
    <EmailLayout>
      <EmailHeader />
      <div className="space-y-3 px-6 py-6">
        <h1 className="text-xl font-medium text-fg">Confirm it is you</h1>
        <p className="text-sm text-fg-muted">Click below to verify aman@minidev.pro.</p>
        <EmailButton>Verify email</EmailButton>
      </div>
      <EmailCard title="Did not request this?">Ignore this message — your account stays unchanged.</EmailCard>
      <EmailFooter />
    </EmailLayout>
  )
}

API reference#

EmailLayout props
PropTypeDefault
children*React.ReactNode-
classNamestring-

* required

Examples#

All email templates