import { AvatarGroup } from "@/components/email/avatar-group";
import { defaultTheme } from "@/components/email/theme-default";
export function AvatarGroupDemo() {
return (
<AvatarGroup
size="md"
align="left"
theme={{ ...defaultTheme, containerWidth: "640px" }}
/>
);
}Installation
$ pnpm dlx shadcn@latest add @emailcn/mjml-react/avatar-group
Usage
import { AvatarGroup } from "@/components/email/avatar-group";<AvatarGroup size="md" align="left" />Examples
Grouped overlapped avatars
xs
import { AvatarGroup } from "@/components/email/avatar-group";
export function AvatarGroupSizeXsExampleDemo() {
return <AvatarGroup size="xs" />;
}sm
import { AvatarGroup } from "@/components/email/avatar-group";
export function AvatarGroupSizeSmExampleDemo() {
return <AvatarGroup size="sm" />;
}md
import { AvatarGroup } from "@/components/email/avatar-group";
export function AvatarGroupSizeMdAlignLeftExampleDemo() {
return <AvatarGroup size="md" align="left" />;
}lg
import { AvatarGroup } from "@/components/email/avatar-group";
export function AvatarGroupSizeLgExampleDemo() {
return <AvatarGroup size="lg" />;
}xl
import { AvatarGroup } from "@/components/email/avatar-group";
export function AvatarGroupSizeXlExampleDemo() {
return <AvatarGroup size="xl" />;
}2xl
import { AvatarGroup } from "@/components/email/avatar-group";
export function AvatarGroupSize2xlExampleDemo() {
return <AvatarGroup size="2xl" />;
}Grouped overlapped avatars with plus count
xs
import { AvatarGroup } from "@/components/email/avatar-group";
export function AvatarGroupSizeXsPlusCount12ExampleDemo() {
return <AvatarGroup size="xs" plusCount={12} />;
}sm
import { AvatarGroup } from "@/components/email/avatar-group";
export function AvatarGroupSizeSmPlusCount12ExampleDemo() {
return <AvatarGroup size="sm" plusCount={12} />;
}md
import { AvatarGroup } from "@/components/email/avatar-group";
export function AvatarGroupSizeMdPlusCount12ExampleDemo() {
return <AvatarGroup size="md" plusCount={12} />;
}lg
import { AvatarGroup } from "@/components/email/avatar-group";
export function AvatarGroupSizeLgPlusCount12ExampleDemo() {
return <AvatarGroup size="lg" plusCount={12} />;
}xl
import { AvatarGroup } from "@/components/email/avatar-group";
export function AvatarGroupSizeXlPlusCount12ExampleDemo() {
return <AvatarGroup size="xl" plusCount={12} />;
}2xl
import { AvatarGroup } from "@/components/email/avatar-group";
export function AvatarGroupSize2xlPlusCount12ExampleDemo() {
return <AvatarGroup size="2xl" plusCount={12} />;
}API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
theme | EmailTheme | defaultTheme | Renderer theme configuration. |
avatars | Array<{ name: string; url?: string }> | Built-in avatars | Configures the component's avatars. |
plusCount | number | - | Configures the component's pluscount. |
size | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "md" | Configures the component's size. |
align | "left" | "center" | "right" | "left" | Configures the component's align. |