import { OverlapHero } from "@/components/email/overlap-hero";
import { defaultTheme } from "@/components/email/theme-default";
export function OverlapHeroDemo() {
return (
<OverlapHero
target="content"
direction="left"
theme={{ ...defaultTheme, containerWidth: "640px" }}
/>
);
}Installation
$ pnpm dlx shadcn@latest add @emailcn/jsx-email/overlap-hero
Usage
import { OverlapHero } from "@/components/email/overlap-hero";<OverlapHero target="content" direction="left" />Examples
Hero with overlapped content
basic
import { OverlapHero } from "@/components/email/overlap-hero";
export function OverlapHeroTargetContentDirectionLeftExampleDemo() {
return <OverlapHero target="content" direction="left" />;
}basic-with-gradient
import { OverlapHero } from "@/components/email/overlap-hero";
export function OverlapHeroTargetContentVariantBasicWithGradientExampleDemo() {
return <OverlapHero target="content" variant="basic-with-gradient" />;
}reversed
import { OverlapHero } from "@/components/email/overlap-hero";
export function OverlapHeroTargetContentVariantReversedExampleDemo() {
return <OverlapHero target="content" variant="reversed" />;
}reversed-with-gradient
import { OverlapHero } from "@/components/email/overlap-hero";
export function OverlapHeroTargetContentVariantReversedWithGradientExampleDemo() {
return <OverlapHero target="content" variant="reversed-with-gradient" />;
}Hero with overlapped image
default
import { OverlapHero } from "@/components/email/overlap-hero";
export function OverlapHeroTargetImageVariantDefaultExampleDemo() {
return <OverlapHero target="image" variant="default" />;
}slanted-left
import { OverlapHero } from "@/components/email/overlap-hero";
export function OverlapHeroTargetImageVariantSlantedLeftExampleDemo() {
return <OverlapHero target="image" variant="slanted-left" />;
}slanted-right
import { OverlapHero } from "@/components/email/overlap-hero";
export function OverlapHeroTargetImageVariantSlantedRightExampleDemo() {
return <OverlapHero target="image" variant="slanted-right" />;
}API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
theme | EmailTheme | defaultTheme | Renderer theme configuration. |
content | { eyebrow?: string; heading?: string; emphasis?: string; subheading?: string; description?: string; price?: string; actions?: Array<{ href: string; label: string }> } | - | Configures the component's content. |
images | Array<{ src: string; alt?: string }> | - | Configures the component's images. |
backgroundImage | { src: string; alt?: string } | - | Configures the component's backgroundimage. |
brand | { logo: { src: string; alt?: string }; href?: string } | - | Configures the component's brand. |
target | "content" | "image" | "content" | Configures the component's target. |
direction | "left" | "right" | "left" | Configures the component's direction. |
gradient | boolean | false | Configures the component's gradient. |
slanted | boolean | false | Configures the component's slanted. |
variant | "basic" | "reversed" | "basic-with-gradient" | "reversed-with-gradient" | "default" | "slanted-left" | "slanted-right" | Derived from the other props | Selects an exact legacy composition when needed. |