import { Spacer } from "@/components/email/spacer";
import { defaultTheme } from "@/components/email/theme-default";
export function SpacerDemo() {
return (
<Spacer height={64} theme={{ ...defaultTheme, containerWidth: "640px" }} />
);
}Installation
$ pnpm dlx shadcn@latest add @emailcn/jsx-email/spacer
Usage
import { Spacer } from "@/components/email/spacer";<Spacer height={64} />Examples
Vertical spacer
24px
import { Spacer } from "@/components/email/spacer";
export function SpacerHeight24ExampleDemo() {
return <Spacer height={24} />;
}48px
import { Spacer } from "@/components/email/spacer";
export function SpacerHeight48ExampleDemo() {
return <Spacer height={48} />;
}64px
import { Spacer } from "@/components/email/spacer";
export function SpacerHeight64ExampleDemo() {
return <Spacer height={64} />;
}API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
theme | EmailTheme | defaultTheme | Renderer theme configuration. |
height | number | 24 | Configures the component's height. |