Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.emailux.com/llms.txt

Use this file to discover all available pages before exploring further.

​
1. Install dependencies

Install the EmailUX Email package locally and a few components. 
# pnpm
pnpm add @emailux/components

# npm
npm install @emailux/components

# yarn
yarn add @emailux/components

​
2. Usage

import { BodyContent } from "@emailux/components";

export default function EmailTemplate() {
  return <>
      <BodyContent>
          <title>Header</title>
      </BodyContent>

      <BodyContent>
          <title>Body</title>
      </BodyContent>

      <BodyContent>
          <title>Footer</title>
      </BodyContent>
  </>
}

​
Props

NameTypeRequiredDefaultDescription
childrenReact.ReactNodeYes—Content of the email document
dir”ltr” | “rtl”NoComes from wrapping Html component’s dir context prop which is ltrText direction
backgroundstringYes——
backgroundColorstringYes——
styleReact.CSSPropertiesNo--
widthnumber or “100%“No—width of container
paddingstringNo12px 20pxinner padding
outerBgColorstringNo—When whidth is not 100% and a number, you can set this value as Hex color value to set the left and right side of the section background color, not the inside
borderRadiusstringNo
classNamestringno——
backgroundPositionstringno”bottom”when there is background image url this is css property for position
backgroundRepeatstringno”no-repeat, no-repeat”when there is background image url this is css property for repeat
bgImageTakesAllWrappersstringnofalsewhen there is background image url takes all if width is not 100%, but with 100% it already takes all
borderWidthnumberNo—border width
borderColorstringNo—Border will work if border width is greater than 0