import { SpotlightStats } from "@/components/email/spotlight-stats";
import { defaultTheme } from "@/components/email/theme-default";
export function SpotlightStatsDemo() {
return (
<SpotlightStats
position="center"
theme={{ ...defaultTheme, containerWidth: "640px" }}
/>
);
}Installation
$ pnpm dlx shadcn@latest add @emailcn/mjml-react/spotlight-stats
Usage
import { SpotlightStats } from "@/components/email/spotlight-stats";<SpotlightStats position="center" />Examples
Rolling stats
center
import { SpotlightStats } from "@/components/email/spotlight-stats";
export function SpotlightStatsPositionCenterExampleDemo() {
return <SpotlightStats position="center" />;
}top-left
import { SpotlightStats } from "@/components/email/spotlight-stats";
export function SpotlightStatsPositionTopLeftExampleDemo() {
return <SpotlightStats position="top-left" />;
}top-right
import { SpotlightStats } from "@/components/email/spotlight-stats";
export function SpotlightStatsPositionTopRightExampleDemo() {
return <SpotlightStats position="top-right" />;
}bottom-left
import { SpotlightStats } from "@/components/email/spotlight-stats";
export function SpotlightStatsPositionBottomLeftExampleDemo() {
return <SpotlightStats position="bottom-left" />;
}bottom-right
import { SpotlightStats } from "@/components/email/spotlight-stats";
export function SpotlightStatsPositionBottomRightExampleDemo() {
return <SpotlightStats position="bottom-right" />;
}Single stat with background image
center
import { SpotlightStats } from "@/components/email/spotlight-stats";
import { emailAsset } from "@/components/email/email-assets";
export function SpotlightStatsPositionCenterBackgroundImageExampleDemo() {
return (
<SpotlightStats
position="center"
backgroundImage={{
alt: "Background",
src: emailAsset("images/image-landscape-1.jpg"),
}}
/>
);
}top-left
import { SpotlightStats } from "@/components/email/spotlight-stats";
import { emailAsset } from "@/components/email/email-assets";
export function SpotlightStatsPositionTopLeftBackgroundImageExampleDemo() {
return (
<SpotlightStats
position="top-left"
backgroundImage={{
alt: "Background",
src: emailAsset("images/image-landscape-1.jpg"),
}}
/>
);
}top-right
import { SpotlightStats } from "@/components/email/spotlight-stats";
import { emailAsset } from "@/components/email/email-assets";
export function SpotlightStatsPositionTopRightBackgroundImageExampleDemo() {
return (
<SpotlightStats
position="top-right"
backgroundImage={{
alt: "Background",
src: emailAsset("images/image-landscape-1.jpg"),
}}
/>
);
}bottom-left
import { SpotlightStats } from "@/components/email/spotlight-stats";
import { emailAsset } from "@/components/email/email-assets";
export function SpotlightStatsPositionBottomLeftBackgroundImageExampleDemo() {
return (
<SpotlightStats
position="bottom-left"
backgroundImage={{
alt: "Background",
src: emailAsset("images/image-landscape-1.jpg"),
}}
/>
);
}bottom-right
import { SpotlightStats } from "@/components/email/spotlight-stats";
import { emailAsset } from "@/components/email/email-assets";
export function SpotlightStatsPositionBottomRightBackgroundImageExampleDemo() {
return (
<SpotlightStats
position="bottom-right"
backgroundImage={{
alt: "Background",
src: emailAsset("images/image-landscape-1.jpg"),
}}
/>
);
}API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
theme | EmailTheme | defaultTheme | Renderer theme configuration. |
eyebrow | string | "Mapped trails" | Configures the component's eyebrow. |
label | string | "Tracked by active users" | Configures the component's label. |
values | string[] | - | Configures the component's values. |
position | "center" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "center" | Configures the component's position. |
backgroundImage | { src: string; alt?: string } | - | Configures the component's backgroundimage. |