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.

Logo Cloud

Logo Cloud rendered with email-safe, renderer-native components.

React Email MJML React JSX Email

import { LogoCloud } from "@/components/email/logo-cloud";
import { defaultTheme } from "@/components/email/theme-default";

export function LogoCloudDemo() {
  return (
    <LogoCloud
      layout="cloud"
      appearance="plain"
      alignment="center"
      theme={{ ...defaultTheme, containerWidth: "640px" }}
    />
  );
}

Installation


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

Usage

import { LogoCloud } from "@/components/email/logo-cloud";

<LogoCloud layout="cloud" appearance="plain" alignment="center" />

Examples

Basic logo cloud

full

import { LogoCloud } from "@/components/email/logo-cloud";

export function LogoCloudLayoutCloudAppearancePlainTitleDescriptionExampleDemo() {
  return (
    <LogoCloud
      layout="cloud"
      appearance="plain"
      title="Supported payment services"
      description="Choose the payment method that works for you."
    />
  );
}

minimal

import { LogoCloud } from "@/components/email/logo-cloud";

export function LogoCloudLayoutCloudAppearancePlainAlignmentCenterExampleDemo() {
  return <LogoCloud layout="cloud" appearance="plain" alignment="center" />;
}

with-description

import { LogoCloud } from "@/components/email/logo-cloud";

export function LogoCloudLayoutCloudAppearancePlainDescriptionExampleDemo() {
  return (
    <LogoCloud
      layout="cloud"
      appearance="plain"
      description="Choose the payment method that works for you."
    />
  );
}

with-title

import { LogoCloud } from "@/components/email/logo-cloud";

export function LogoCloudLayoutCloudAppearancePlainTitleExampleDemo() {
  return (
    <LogoCloud
      layout="cloud"
      appearance="plain"
      title="Supported payment services"
    />
  );
}

Logo cloud

Boxed full

import { LogoCloud } from "@/components/email/logo-cloud";

export function LogoCloudLayoutCloudAppearanceBoxedTitleDescriptionExampleDemo() {
  return (
    <LogoCloud
      layout="cloud"
      appearance="boxed"
      title="Supported payment services"
      description="Choose the payment method that works for you."
    />
  );
}

Boxed minimal

import { LogoCloud } from "@/components/email/logo-cloud";

export function LogoCloudLayoutCloudAppearanceBoxedExampleDemo() {
  return <LogoCloud layout="cloud" appearance="boxed" />;
}

Boxed with description

import { LogoCloud } from "@/components/email/logo-cloud";

export function LogoCloudLayoutCloudAppearanceBoxedDescriptionExampleDemo() {
  return (
    <LogoCloud
      layout="cloud"
      appearance="boxed"
      description="Choose the payment method that works for you."
    />
  );
}

Boxed with title

import { LogoCloud } from "@/components/email/logo-cloud";

export function LogoCloudLayoutCloudAppearanceBoxedTitleExampleDemo() {
  return (
    <LogoCloud
      layout="cloud"
      appearance="boxed"
      title="Supported payment services"
    />
  );
}

Boxed flush

import { LogoCloud } from "@/components/email/logo-cloud";

export function LogoCloudLayoutCloudAppearanceBoxedFlushExampleDemo() {
  return <LogoCloud layout="cloud" appearance="boxed" flush />;
}

Outlined full

import { LogoCloud } from "@/components/email/logo-cloud";

export function LogoCloudLayoutCloudAppearanceOutlinedTitleDescriptionExampleDemo() {
  return (
    <LogoCloud
      layout="cloud"
      appearance="outlined"
      title="Supported payment services"
      description="Choose the payment method that works for you."
    />
  );
}

Outlined minimal

import { LogoCloud } from "@/components/email/logo-cloud";

export function LogoCloudLayoutCloudAppearanceOutlinedExampleDemo() {
  return <LogoCloud layout="cloud" appearance="outlined" />;
}

Outlined with description

import { LogoCloud } from "@/components/email/logo-cloud";

export function LogoCloudLayoutCloudAppearanceOutlinedDescriptionExampleDemo() {
  return (
    <LogoCloud
      layout="cloud"
      appearance="outlined"
      description="Choose the payment method that works for you."
    />
  );
}

Outlined with title

import { LogoCloud } from "@/components/email/logo-cloud";

export function LogoCloudLayoutCloudAppearanceOutlinedTitleExampleDemo() {
  return (
    <LogoCloud
      layout="cloud"
      appearance="outlined"
      title="Supported payment services"
    />
  );
}

Outlined flush

import { LogoCloud } from "@/components/email/logo-cloud";

export function LogoCloudLayoutCloudAppearanceOutlinedFlushExampleDemo() {
  return <LogoCloud layout="cloud" appearance="outlined" flush />;
}

Logo cloud with borders

full

import { LogoCloud } from "@/components/email/logo-cloud";

export function LogoCloudLayoutCloudAppearanceBorderedTitleDescriptionExampleDemo() {
  return (
    <LogoCloud
      layout="cloud"
      appearance="bordered"
      title="Supported payment services"
      description="Choose the payment method that works for you."
    />
  );
}

minimal

import { LogoCloud } from "@/components/email/logo-cloud";

export function LogoCloudLayoutCloudAppearanceBorderedExampleDemo() {
  return <LogoCloud layout="cloud" appearance="bordered" />;
}

with-description

import { LogoCloud } from "@/components/email/logo-cloud";

export function LogoCloudLayoutCloudAppearanceBorderedDescriptionExampleDemo() {
  return (
    <LogoCloud
      layout="cloud"
      appearance="bordered"
      description="Choose the payment method that works for you."
    />
  );
}

with-title

import { LogoCloud } from "@/components/email/logo-cloud";

export function LogoCloudLayoutCloudAppearanceBorderedTitleExampleDemo() {
  return (
    <LogoCloud
      layout="cloud"
      appearance="bordered"
      title="Supported payment services"
    />
  );
}

flush

import { LogoCloud } from "@/components/email/logo-cloud";

export function LogoCloudLayoutCloudAppearanceBorderedFlushExampleDemo() {
  return <LogoCloud layout="cloud" appearance="bordered" flush />;
}

Featured brands logo grid

boxed left

import { LogoCloud } from "@/components/email/logo-cloud";

export function LogoCloudLayoutFeaturedAppearanceBoxedAlignmentLeftExampleDemo() {
  return <LogoCloud layout="featured" appearance="boxed" alignment="left" />;
}

boxed center

import { LogoCloud } from "@/components/email/logo-cloud";

export function LogoCloudLayoutFeaturedAppearanceBoxedAlignmentCenterExampleDemo() {
  return <LogoCloud layout="featured" appearance="boxed" alignment="center" />;
}

boxed right

import { LogoCloud } from "@/components/email/logo-cloud";

export function LogoCloudLayoutFeaturedAppearanceBoxedAlignmentRightExampleDemo() {
  return <LogoCloud layout="featured" appearance="boxed" alignment="right" />;
}

outlined left

import { LogoCloud } from "@/components/email/logo-cloud";

export function LogoCloudLayoutFeaturedAppearanceOutlinedAlignmentLeftExampleDemo() {
  return <LogoCloud layout="featured" appearance="outlined" alignment="left" />;
}

outlined center

import { LogoCloud } from "@/components/email/logo-cloud";

export function LogoCloudLayoutFeaturedAppearanceOutlinedAlignmentCenterExampleDemo() {
  return (
    <LogoCloud layout="featured" appearance="outlined" alignment="center" />
  );
}

outlined right

import { LogoCloud } from "@/components/email/logo-cloud";

export function LogoCloudLayoutFeaturedAppearanceOutlinedAlignmentRightExampleDemo() {
  return (
    <LogoCloud layout="featured" appearance="outlined" alignment="right" />
  );
}

Logos grid

boxed

import { LogoCloud } from "@/components/email/logo-cloud";

export function LogoCloudLayoutGridAppearanceBoxedAlignmentCenterExampleDemo() {
  return <LogoCloud layout="grid" appearance="boxed" alignment="center" />;
}

outlined

import { LogoCloud } from "@/components/email/logo-cloud";

export function LogoCloudLayoutGridAppearanceOutlinedAlignmentCenterExampleDemo() {
  return <LogoCloud layout="grid" appearance="outlined" alignment="center" />;
}

bordered

import { LogoCloud } from "@/components/email/logo-cloud";

export function LogoCloudLayoutGridAppearanceBorderedAlignmentCenterExampleDemo() {
  return <LogoCloud layout="grid" appearance="bordered" alignment="center" />;
}

API Reference

Prop	Type	Default	Description
`theme`	`EmailTheme`	`defaultTheme`	Renderer theme configuration.
`title`	`string`	-	Configures the component's title.
`description`	`string`	`"We created a personal account for you. Please confirm your e-mail address and use our service to the maximum"`	Configures the component's description.
`logos`	`Array<{ alt: string; src: string; width: number }>`	Built-in logos	Configures the component's logos.
`layout`	`"cloud" \| "grid" \| "featured"`	`"cloud"`	Configures the component's layout.
`appearance`	`"plain" \| "boxed" \| "outlined" \| "bordered"`	`"plain"`	Configures the component's appearance.
`alignment`	`"left" \| "center" \| "right"`	`"center"`	Configures the component's alignment.
`featuredIndex`	`number`	`0`	Configures the component's featuredindex.
`flush`	`boolean`	`false`	Removes the outer spacing where supported.

Full Width Pricing

Edit this page Follow @shadcnlabs Join community