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 mobile="gutters">{children}</Container>
<Container mobile="flush">{children}</Container>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
mobile | "gutters" | "flush" | "gutters" | Side padding behavior on mobile |
align | "left" | "center" | "right" | "center" | Horizontal alignment |
maxWidth | string | "600px" | Maximum container width |
children | React.ReactNode | - | Container content |
theme | TailwindConfig | defaultTheme | Email theme styling |