Skip to main content

​
1. Install dependencies

Install the InkDes Email package locally and a few components. 
# pnpm
pnpm add @inkdes-email/components

# npm
npm install @inkdes-email/components

# yarn
yarn add @inkdes-email/components

​
2. Usage

import { Box } from "@inkdes-email/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