import { Container } from "@/components/email/container";
import { defaultTheme } from "@/components/email/theme-default";
export function ContainerDemo() {
return (
<Container
mobile="gutters"
align="left"
theme={{ ...defaultTheme, containerWidth: "640px" }}
/>
);
}Installation
$ pnpm dlx shadcn@latest add @emailcn/mjml-react/container
Usage
import { Container } from "@/components/email/container";<Container mobile="gutters" align="left" />Examples
Container
mobile gutters
import { Container } from "@/components/email/container";
export function ContainerMobileGuttersAlignLeftExampleDemo() {
return <Container mobile="gutters" align="left" />;
}flush on mobile
import { Container } from "@/components/email/container";
export function ContainerMobileFlushExampleDemo() {
return <Container mobile="flush" />;
}API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
theme | EmailTheme | defaultTheme | Renderer theme configuration. |
children | ReactNode | - | Configures the component's children. |
maxWidth | string | "600px" | Configures the component's maxwidth. |
align | "left" | "center" | "right" | "center" | Configures the component's align. |
mobile | "flush" | "gutters" | "gutters" | Configures the component's mobile. |