Skip to content

Preview

Renders a preview viewable in recipient email clients

TIP

Email clients have this concept of “preview text” which gives insight into what's inside the email before you open. A good practice is to keep that text under 90 characters.

Install

Install the component from your command line

console
pnpm install email-craft
pnpm install email-craft
console
bun install email-craft
bun install email-craft
console
npm install email-craft
npm install email-craft
console
yarn install email-craft
yarn install email-craft

Usage

Add the component to your email template. Include styles where needed.

jsx
import { Preview } from 'email-craft';

const Email = () => {
  return <Preview>Email preview text</Preview>;
};
import { Preview } from 'email-craft';

const Email = () => {
  return <Preview>Email preview text</Preview>;
};

Component Props

This component has no custom props, but expresses all of the Common Component Props for ComponentProps<'div'>.