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 { Box } from "@emailux/components";

export default function EmailTemplate() {
  return <>
      <Box 
        width='120px' 
        padding='10px 16px'
        center 
        borderRadius='10px'
        backgroundColor='#fff' 
        spacing='20px'
        backgroundImageUrl='https://example.com/image.png'
        >
          <Text>
      </Box>
  </>
}

​
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
backgroundColorstringYes——
styleReact.CSSPropertiesNo--
widthnumber or “100%“No—width of container
paddingstringNo10px 16pxinner padding
classNamestringno——
borderRadiusstringNo
backgroundImageUrlstringnoBox background image
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
itemCenterbooleannotrueInner items will be aligned center
centerbooleannotrueThe box will be positioned center of email
borderWidthnumberNo—border width
borderColorstringNo—Border will work if border width is greater than 0