5
Sponsor

User Details

Header With User Details rendered with email-safe, renderer-native components.

import { HeaderWithUserDetails } from "@/components/email/header-with-user-details";
import { defaultTheme } from "@/components/email/theme-default";

export function HeaderWithUserDetailsDemo() {
  return (
    <HeaderWithUserDetails
      alignment="right"
      avatar="initials"
      theme={{ ...defaultTheme, containerWidth: "640px" }}
    />
  );
}

Installation

$ pnpm dlx shadcn@latest add @emailcn/mjml-react/header-with-user-details

Usage

import { HeaderWithUserDetails } from "@/components/email/header-with-user-details";
<HeaderWithUserDetails alignment="right" avatar="initials" />

Examples

Image avatar

import { HeaderWithUserDetails } from "@/components/email/header-with-user-details";

export function HeaderWithUserDetailsImageAvatarDemo() {
  return <HeaderWithUserDetails alignment="left" avatar="image" />;
}
import { HeaderWithUserDetails } from "@/components/email/header-with-user-details";

export function HeaderWithUserDetailsAvatarInitialsAlignmentRightExampleDemo() {
  return <HeaderWithUserDetails avatar="initials" alignment="right" />;
}
import { HeaderWithUserDetails } from "@/components/email/header-with-user-details";

export function HeaderWithUserDetailsAvatarImageAlignmentRightExampleDemo() {
  return <HeaderWithUserDetails avatar="image" alignment="right" />;
}

API Reference

PropTypeDefaultDescription
themeEmailThemedefaultThemeRenderer theme configuration.
logoSrcstring"https://placehold.co/320x96/0F766E/FFFFFF.png?text=Maizzle%20Insignia"Configures the component's logosrc.
logoAltstring"Maizzle"Configures the component's logoalt.
logoHrefstring"https://example.com"Configures the component's logohref.
userNamestring-Configures the component's username.
userEmailstring-Configures the component's useremail.
initialsstring"JD"Configures the component's initials.
avatarSrcstring-Configures the component's avatarsrc.
avatarAltstring""Configures the component's avataralt.
avatar"initials" | "image""initials"Configures the component's avatar.
alignment"left" | "right""left"Configures the component's alignment.
pageBackgroundColorstring"#f1f5f9"Configures the component's pagebackgroundcolor.
backgroundColorstring"#fffffe"Configures the component's backgroundcolor.
avatarBackgroundColorstring"#f3f4f6"Configures the component's avatarbackgroundcolor.
headingColorstring"#030712"Configures the component's headingcolor.
textColorstring"#4b5563"Configures the component's textcolor.
mutedTextColorstring"#6b7280"Configures the component's mutedtextcolor.