import { AvatarDetails } from "@/components/email/avatar-details";
import { defaultTheme } from "@/components/email/theme-default";
export function AvatarDetailsDemo() {
return (
<AvatarDetails
align="left"
theme={{ ...defaultTheme, containerWidth: "640px" }}
/>
);
}Installation
$ pnpm dlx shadcn@latest add @emailcn/mjml-react/avatar-details
Usage
import { AvatarDetails } from "@/components/email/avatar-details";<AvatarDetails align="left" />Examples
Avatar with details
left
import { AvatarDetails } from "@/components/email/avatar-details";
export function AvatarDetailsAlignLeftExampleDemo() {
return <AvatarDetails align="left" />;
}center
import { AvatarDetails } from "@/components/email/avatar-details";
export function AvatarDetailsAlignCenterExampleDemo() {
return <AvatarDetails align="center" />;
}right
import { AvatarDetails } from "@/components/email/avatar-details";
export function AvatarDetailsAlignRightExampleDemo() {
return <AvatarDetails align="right" />;
}API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
theme | EmailTheme | defaultTheme | Renderer theme configuration. |
avatar | { name: string; url?: string } | - | Configures the component's avatar. |
name | string | - | Configures the component's name. |
email | string | - | Configures the component's email. |
align | "left" | "center" | "right" | "left" | Configures the component's align. |