Themes
Marketing
Ecommerce
One Container component wraps your content. Use the mobile prop to control
whether content sits edge-to-edge (flush) or keeps side padding (gutters) on
mobile, and align to set horizontal alignment.
Flush on Mobile
Gutters on Mobile
Installation
$ pnpm dlx shadcn@latest add @emailcn/container
Usage
import { Container } from "@/components/emails/ui-elements/containers/container";<Container content="Edge-to-edge content on mobile." mobile="flush" />
<Container content="Content with comfortable padding on mobile." mobile="gutters" />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
mobile | "gutters" | "flush" | "gutters" | Side padding behavior on mobile |
align | "left" | "center" | "right" | "center" | Horizontal alignment |
content | string | - | Container text content |
theme | EmailThemeTokens | defaultTheme | Email theme styling |