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

pnpmbunnpmyarn
console

    pnpm add jsx-email

    pnpm add jsx-email

console

    bun add jsx-email

    bun add jsx-email

console

    npm add jsx-email

    npm add jsx-email

console

    yarn add jsx-email

    yarn add jsx-email

## Usage ​

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

jsx

    import { Preview } from 'jsx-email';

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

    import { Preview } from 'jsx-email';

    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'>`.