A collection of beautifully designed, accessible, and customizable email components for React Email, MJML React, and JSX Email. Works with shadcn/ui.

How do I use emailcn?

Use npx shadcn@latest add with our registry URL to install components and blocks. Themes, components, and blocks are all installable via the shadcn CLI.

Is emailcn open source?

Yes. The source is on GitHub and released under the MIT License.

Team

Team rendered with email-safe, renderer-native components.

React Email MJML React JSX Email

import { Team } from "@/components/email/team";
import { defaultTheme } from "@/components/email/theme-default";

export function TeamDemo() {
  return (
    <Team
      layout="cards"
      columns={2}
      appearance="plain"
      theme={{ ...defaultTheme, containerWidth: "640px" }}
    />
  );
}

Installation


$ pnpm dlx shadcn@latest add @emailcn/jsx-email/team

Usage

import { Team } from "@/components/email/team";

<Team layout="cards" columns={2} appearance="plain" />

Examples

2-column team cards

default

import { Team } from "@/components/email/team";

export function TeamLayoutCardsColumns2AppearancePlainExampleDemo() {
  return <Team layout="cards" columns={2} appearance="plain" />;
}

boxed

import { Team } from "@/components/email/team";

export function TeamLayoutCardsColumns2DetailsFalseVariantBoxedExampleDemo() {
  return <Team layout="cards" columns={2} details={false} variant="boxed" />;
}

boxed-alt

import { Team } from "@/components/email/team";

export function TeamLayoutCardsColumns2DetailsFalseVariantBoxedAltExampleDemo() {
  return (
    <Team layout="cards" columns={2} details={false} variant="boxed-alt" />
  );
}

accent

import { Team } from "@/components/email/team";

export function TeamLayoutCardsColumns2DetailsFalseVariantAccentExampleDemo() {
  return <Team layout="cards" columns={2} details={false} variant="accent" />;
}

accent-alt

import { Team } from "@/components/email/team";

export function TeamLayoutCardsColumns2DetailsFalseVariantAccentAltExampleDemo() {
  return (
    <Team layout="cards" columns={2} details={false} variant="accent-alt" />
  );
}

rounded

import { Team } from "@/components/email/team";

export function TeamLayoutCardsColumns2DetailsFalseVariantRoundedExampleDemo() {
  return <Team layout="cards" columns={2} details={false} variant="rounded" />;
}

rounded-accent

import { Team } from "@/components/email/team";

export function TeamLayoutCardsColumns2DetailsFalseVariantRoundedAccentExampleDemo() {
  return (
    <Team layout="cards" columns={2} details={false} variant="rounded-accent" />
  );
}

2-column team cards with details

default

import { Team } from "@/components/email/team";

export function TeamLayoutCardsColumns2DetailsVariantDefaultExampleDemo() {
  return <Team layout="cards" columns={2} details variant="default" />;
}

boxed

import { Team } from "@/components/email/team";

export function TeamLayoutCardsColumns2DetailsVariantBoxedExampleDemo() {
  return <Team layout="cards" columns={2} details variant="boxed" />;
}

accent

import { Team } from "@/components/email/team";

export function TeamLayoutCardsColumns2DetailsVariantAccentExampleDemo() {
  return <Team layout="cards" columns={2} details variant="accent" />;
}

2-column compact

default

import { Team } from "@/components/email/team";

export function TeamLayoutCompactColumns2VariantDefaultExampleDemo() {
  return <Team layout="compact" columns={2} variant="default" />;
}

border-top

import { Team } from "@/components/email/team";

export function TeamLayoutCompactColumns2VariantBorderTopExampleDemo() {
  return <Team layout="compact" columns={2} variant="border-top" />;
}

bordered

import { Team } from "@/components/email/team";

export function TeamLayoutCompactColumns2VariantBorderedExampleDemo() {
  return <Team layout="compact" columns={2} variant="bordered" />;
}

accent

import { Team } from "@/components/email/team";

export function TeamLayoutCompactColumns2VariantAccentExampleDemo() {
  return <Team layout="compact" columns={2} variant="accent" />;
}

3-column team grid

default

import { Team } from "@/components/email/team";

export function TeamLayoutGridColumns3VariantDefaultExampleDemo() {
  return <Team layout="grid" columns={3} variant="default" />;
}

bordered

import { Team } from "@/components/email/team";

export function TeamLayoutGridColumns3VariantBorderedExampleDemo() {
  return <Team layout="grid" columns={3} variant="bordered" />;
}

with-accent

import { Team } from "@/components/email/team";

export function TeamLayoutGridColumns3VariantWithAccentExampleDemo() {
  return <Team layout="grid" columns={3} variant="with-accent" />;
}

with-hero

import { Team } from "@/components/email/team";

export function TeamLayoutGridColumns3VariantWithHeroExampleDemo() {
  return <Team layout="grid" columns={3} variant="with-hero" />;
}

Horizontal team member bios

image-left

import { Team } from "@/components/email/team";

export function TeamLayoutBiosVariantImageLeftExampleDemo() {
  return <Team layout="bios" variant="image-left" />;
}

image-right

import { Team } from "@/components/email/team";

export function TeamLayoutBiosVariantImageRightExampleDemo() {
  return <Team layout="bios" variant="image-right" />;
}

image-left-accent

import { Team } from "@/components/email/team";

export function TeamLayoutBiosVariantImageLeftAccentExampleDemo() {
  return <Team layout="bios" variant="image-left-accent" />;
}

image-right-accent

import { Team } from "@/components/email/team";

export function TeamLayoutBiosVariantImageRightAccentExampleDemo() {
  return <Team layout="bios" variant="image-right-accent" />;
}

API Reference

Prop	Type	Default	Description
`theme`	`EmailTheme`	`defaultTheme`	Renderer theme configuration.
`members`	`Array<{ name: string; role: string; avatar: { alt?: string; src: string }; bio?: string; email?: string }>`	-	Configures the component's members.
`layout`	`"cards" \| "compact" \| "grid" \| "bios"`	`"cards"`	Configures the component's layout.
`columns`	`2 \| 3`	`2`	Configures the component's columns.
`appearance`	`"plain" \| "boxed" \| "bordered" \| "accent" \| "rounded"`	`"plain"`	Configures the component's appearance.
`imagePosition`	`"left" \| "right"`	`"left"`	Configures the component's imageposition.
`heroImage`	`{ src: string; alt?: string }`	-	Configures the component's heroimage.
`details`	`boolean`	`false`	Includes biographies and email details in card layouts.
`variant`	`"default" \| "boxed" \| "accent" \| "boxed-alt" \| "accent-alt" \| "rounded" \| "rounded-accent" \| "border-top" \| "bordered" \| "with-accent" \| "with-hero" \| "image-left" \| "image-right" \| "image-left-accent" \| "image-right-accent"`	Derived from the other props	Selects an exact legacy composition when needed.

Stacked Testimonial

Edit this page Follow @shadcnlabs Join community