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 { Text } from "@inkdes-email/components";
import { Card } from "@inkdes-email/card";

export default function EmailTemplate() {
  return <>
      <Card 
        header={<Text>Some header</Text>}
        content={<Text>Some content</Text>}
        footer={<Text>Some footer</Text>}
        headerBackgroundColor='#fff'
        contentBackgroundColor='#fff'
        footerBackgroundColor='#fff'
        borderRadius='24px' 
        padding='12px 15px'
        width='100%'
        spacing='20px' 
     />
  </>
}

Props

NameTypeRequiredDefaultDescription
headerReact.ReactNodeNo
dir”ltr” | “rtl”NoComes from wrapping Html component’s dir context prop which is ltrText direction
spacingstringNoComes from wrapping Html component’s defaultSpacing context prop which is 20pxSpacing bottom, by default comes from Html defaultSpacing prop
contentReact.ReactNodeNo
footerReact.ReactNodeNo
headerBackgroundColorstringNo#fff
contentBackgroundColorstringNo#fff
footerBackgroundColorstringNo#fff
borderRadiusstringNo24px
paddingstringNoinner padding
widthstringNo100%
I