import { HeaderWithLogo } from "@/components/email/header-with-logo";
import { defaultTheme } from "@/components/email/theme-default";
export function HeaderWithLogoDemo() {
return (
<HeaderWithLogo
alignment="left"
variant="minimal"
theme={{ ...defaultTheme, containerWidth: "640px" }}
/>
);
}Installation
$ pnpm dlx shadcn@latest add @emailcn/jsx-email/header-with-logo
Usage
import { HeaderWithLogo } from "@/components/email/header-with-logo";<HeaderWithLogo variant="minimal" alignment="left" />Examples
Logo
left
import { HeaderWithLogo } from "@/components/email/header-with-logo";
export function HeaderWithLogoAlignmentLeftVariantMinimalExampleDemo() {
return <HeaderWithLogo alignment="left" variant="minimal" />;
}center
import { HeaderWithLogo } from "@/components/email/header-with-logo";
export function HeaderWithLogoVariantMinimalAlignmentCenterExampleDemo() {
return <HeaderWithLogo alignment="center" variant="minimal" />;
}right
import { HeaderWithLogo } from "@/components/email/header-with-logo";
export function HeaderWithLogoVariantMinimalAlignmentRightExampleDemo() {
return <HeaderWithLogo alignment="right" variant="minimal" />;
}Logo with text
left
import { HeaderWithLogo } from "@/components/email/header-with-logo";
export function HeaderWithLogoVariantWithTextAlignmentLeftExampleDemo() {
return <HeaderWithLogo alignment="left" variant="with-text" />;
}center
import { HeaderWithLogo } from "@/components/email/header-with-logo";
export function HeaderWithLogoVariantWithTextAlignmentCenterExampleDemo() {
return <HeaderWithLogo alignment="center" variant="with-text" />;
}right
import { HeaderWithLogo } from "@/components/email/header-with-logo";
export function HeaderWithLogoVariantWithTextAlignmentRightExampleDemo() {
return <HeaderWithLogo alignment="right" variant="with-text" />;
}API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
theme | EmailTheme | defaultTheme | Renderer theme configuration. |
logoSrc | string | "https://placehold.co/320x96/0F766E/FFFFFF.png?text=Maizzle%20Insignia" | Configures the component's logosrc. |
logoAlt | string | "Maizzle" | Configures the component's logoalt. |
logoHref | string | "https://example.com" | Configures the component's logohref. |
text | string | "Medium, rare, but mostly well-done\nHTML email components." | Configures the component's text. |
pageBackgroundColor | string | "#f1f5f9" | Configures the component's pagebackgroundcolor. |
backgroundColor | string | "#fffffe" | Configures the component's backgroundcolor. |
textColor | string | "#030712" | Configures the component's textcolor. |
variant | "minimal" | "with-text" | "minimal" | Configures the component's variant. |
alignment | "left" | "center" | "right" | "center" | Configures the component's alignment. |