Package Exports
- @inkdes-email/components
Readme
@inkdes-email/components
InkDes react email components library. You can create emails with these components well tested for email compatibility.
Installation
# pnpm
pnpm add @inkdes-email/components
# npm
npm install @inkdes-email/components
# yarn
yarn add @inkdes-email/componentsQuick start
import { Html, Head, Font, Body, Img, Text, Card, Button } from "@inkdes-email/components";
export default function EmailTemplate() {
return <Html>
<Head>
<Font
family='Trirong'
url='https://fonts.gstatic.com/s/trirong/v17/7r3GqXNgp8wxdOdOn58o2IRj6unHgw.woff2'
format='woff2'
fallback='Arial'
style='normal'
weight='400'
targetClasses={[]}
targetTags={['html', 'body', 'button']}
/>
<title>Platform name</title>
</Head>
<Body previewText='Some preview pre-header text.' width={376} padding='20px 20px' outerBgColor='#fff' backgroundColor='#dedede'>
<Img src="https://cdnjs.cloudflare.com/ajax/libs/browser-logos/75.0.1/chromium/chromium_48x48.png" alt="Cat" width={48} height={48} borderRadius='100%' />;
<Text fontSize='14px' fontWeight='400' fontColor='#000'>Hello world!</Text>
<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%'
outerSpacing='0px 20px'
/>
<Button align='center' href='#' text='Confirm' backgroundColor='#000' textColor='#fff' />
</Body>
</Html>
}Components
Support
This component was tested using the most popular email clients.
License
MIT © iClasser