import { StackedStats } from "@/components/email/stacked-stats";
import { defaultTheme } from "@/components/email/theme-default";
export function StackedStatsDemo() {
return (
<StackedStats
variant="left"
theme={{ ...defaultTheme, containerWidth: "640px" }}
/>
);
}Installation
$ pnpm dlx shadcn@latest add @emailcn/react-email/stacked-stats
Usage
import { StackedStats } from "@/components/email/stacked-stats";<StackedStats variant="left" />Examples
Centered
import { StackedStats } from "@/components/email/stacked-stats";
export function StackedStatsCenteredDemo() {
return <StackedStats variant="center" />;
}Right aligned
import { StackedStats } from "@/components/email/stacked-stats";
export function StackedStatsRightAlignedDemo() {
return <StackedStats variant="right" />;
}API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
theme | EmailTheme | defaultTheme | Renderer theme configuration. |
variant | "left" | "center" | "right" | "left" | Configures the component's variant. |
stats | Array<{ heading: string; value: string; description: string }> | - | Configures the component's stats. |
pageBackgroundColor | string | "#f1f5f9" | Configures the component's pagebackgroundcolor. |
backgroundColor | string | "#fffffe" | Configures the component's backgroundcolor. |
accentColor | string | "#f97316" | Configures the component's accentcolor. |
headingColor | string | "#030712" | Configures the component's headingcolor. |
textColor | string | "#4b5563" | Configures the component's textcolor. |
dividerColor | string | "#cbd5e1" | Configures the component's dividercolor. |