@react-email/avatar

@react-email/avatar

Displays a profile picture or a fallback to the user initials.

Website · GitHub · Discord

Install

Install component from your command line.

With yarn

yarn add @react-email/avatar -E

With npm

npm install @react-email/avatar -E

Getting started

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

Avatar

import { Avatar, AvatarImage, AvatarFallback } from '@react-email/avatar';

const Email = () => {
  return (
    <Avatar>
      <AvatarImage src="cat.jpg" />
      <AvatarFallback>My Cat</AvatarFallback>
    </Avatar>
  );
};

Props

Name	Type	Default	Description
src	string		The path to the image

Support

This component was tested using the most popular email clients.

Gmail ✔	Apple Mail ✔	Outlook ✔	Yahoo! Mail ✔	HEY ✔	Superhuman ✔

License

MIT License