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.

Divider

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

React Email MJML React JSX Email

import { Divider } from "@/components/email/divider";
import { defaultTheme } from "@/components/email/theme-default";

export function DividerDemo() {
  return (
    <Divider
      align="center"
      content={{ title: "Highlights", type: "title" }}
      theme={{ ...defaultTheme, containerWidth: "640px" }}
    />
  );
}

Installation


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

Usage

import { Divider } from "@/components/email/divider";

<Divider align="center" />

Examples

Line divider

default

import { Divider } from "@/components/email/divider";

export function DividerAlignCenterExampleDemo() {
  return <Divider align="center" />;
}

Divider with title

left

import { Divider } from "@/components/email/divider";

export function DividerAlignLeftContentTypeTitleExampleDemo() {
  return (
    <Divider align="left" content={{ title: "Order details", type: "title" }} />
  );
}

center

import { Divider } from "@/components/email/divider";

export function DividerAlignCenterContentTypeTitleExampleDemo() {
  return (
    <Divider
      align="center"
      content={{ title: "Order details", type: "title" }}
    />
  );
}

right

import { Divider } from "@/components/email/divider";

export function DividerAlignRightContentTypeTitleExampleDemo() {
  return (
    <Divider
      align="right"
      content={{ title: "Order details", type: "title" }}
    />
  );
}

Divider with file type

left

import { Divider } from "@/components/email/divider";

export function DividerAlignLeftContentTypeFileExampleDemo() {
  return <Divider align="left" content={{ fileType: "PDF", type: "file" }} />;
}

center

import { Divider } from "@/components/email/divider";

export function DividerAlignCenterContentTypeFileExampleDemo() {
  return <Divider align="center" content={{ fileType: "PDF", type: "file" }} />;
}

right

import { Divider } from "@/components/email/divider";

export function DividerAlignRightContentTypeFileExampleDemo() {
  return <Divider align="right" content={{ fileType: "PDF", type: "file" }} />;
}

Divider with icon

left

import { Divider } from "@/components/email/divider";
import { emailAsset } from "@/components/email/email-assets";

export function DividerAlignLeftContentTypeIconExampleDemo() {
  return (
    <Divider
      align="left"
      content={{
        src: emailAsset("logos/logo-stripe.png"),
        type: "icon",
      }}
    />
  );
}

center

import { Divider } from "@/components/email/divider";
import { emailAsset } from "@/components/email/email-assets";

export function DividerAlignCenterContentTypeIconExampleDemo() {
  return (
    <Divider
      align="center"
      content={{
        src: emailAsset("logos/logo-stripe.png"),
        type: "icon",
      }}
    />
  );
}

right

import { Divider } from "@/components/email/divider";
import { emailAsset } from "@/components/email/email-assets";

export function DividerAlignRightContentTypeIconExampleDemo() {
  return (
    <Divider
      align="right"
      content={{
        src: emailAsset("logos/logo-stripe.png"),
        type: "icon",
      }}
    />
  );
}

Divider with logo

left

import { Divider } from "@/components/email/divider";
import { emailAsset } from "@/components/email/email-assets";

export function DividerAlignLeftContentTypeLogoExampleDemo() {
  return (
    <Divider
      align="left"
      content={{
        image: {
          alt: "Logo",
          src: emailAsset("logos/logo-stripe.png"),
        },
        type: "logo",
      }}
    />
  );
}

center

import { Divider } from "@/components/email/divider";
import { emailAsset } from "@/components/email/email-assets";

export function DividerAlignCenterContentTypeLogoExampleDemo() {
  return (
    <Divider
      align="center"
      content={{
        image: {
          alt: "Logo",
          src: emailAsset("logos/logo-stripe.png"),
        },
        type: "logo",
      }}
    />
  );
}

right

import { Divider } from "@/components/email/divider";
import { emailAsset } from "@/components/email/email-assets";

export function DividerAlignRightContentTypeLogoExampleDemo() {
  return (
    <Divider
      align="right"
      content={{
        image: {
          alt: "Logo",
          src: emailAsset("logos/logo-stripe.png"),
        },
        type: "logo",
      }}
    />
  );
}

left

import { Divider } from "@/components/email/divider";

export function DividerAlignLeftContentTypeSocialsExampleDemo() {
  return <Divider align="left" content={{ type: "socials" }} />;
}

center

import { Divider } from "@/components/email/divider";

export function DividerAlignCenterContentTypeSocialsExampleDemo() {
  return <Divider align="center" content={{ type: "socials" }} />;
}

right

import { Divider } from "@/components/email/divider";

export function DividerAlignRightContentTypeSocialsExampleDemo() {
  return <Divider align="right" content={{ type: "socials" }} />;
}

Divider with icon and button

left

import { Divider } from "@/components/email/divider";
import { emailAsset } from "@/components/email/email-assets";

export function DividerAlignLeftContentTypeIconButtonExampleDemo() {
  return (
    <Divider
      align="left"
      content={{
        action: { href: "https://example.com", label: "Continue" },
        iconSrc: emailAsset("logos/logo-stripe.png"),
        type: "icon-button",
      }}
    />
  );
}

center

import { Divider } from "@/components/email/divider";
import { emailAsset } from "@/components/email/email-assets";

export function DividerAlignCenterContentTypeIconButtonExampleDemo() {
  return (
    <Divider
      align="center"
      content={{
        action: { href: "https://example.com", label: "Continue" },
        iconSrc: emailAsset("logos/logo-stripe.png"),
        type: "icon-button",
      }}
    />
  );
}

right

import { Divider } from "@/components/email/divider";
import { emailAsset } from "@/components/email/email-assets";

export function DividerAlignRightContentTypeIconButtonExampleDemo() {
  return (
    <Divider
      align="right"
      content={{
        action: { href: "https://example.com", label: "Continue" },
        iconSrc: emailAsset("logos/logo-stripe.png"),
        type: "icon-button",
      }}
    />
  );
}

Divider with button

left

import { Divider } from "@/components/email/divider";

export function DividerAlignLeftContentTypeButtonExampleDemo() {
  return (
    <Divider
      align="left"
      content={{
        action: { href: "https://example.com", label: "Continue" },
        type: "button",
      }}
    />
  );
}

center

import { Divider } from "@/components/email/divider";

export function DividerAlignCenterContentTypeButtonExampleDemo() {
  return (
    <Divider
      align="center"
      content={{
        action: { href: "https://example.com", label: "Continue" },
        type: "button",
      }}
    />
  );
}

right

import { Divider } from "@/components/email/divider";

export function DividerAlignRightContentTypeButtonExampleDemo() {
  return (
    <Divider
      align="right"
      content={{
        action: { href: "https://example.com", label: "Continue" },
        type: "button",
      }}
    />
  );
}

API Reference

Prop	Type	Default	Description
`theme`	`EmailTheme`	`defaultTheme`	Renderer theme configuration.
`align`	`"left" \| "center" \| "right"`	`"center"`	Configures the component's align.
`content`	`{ type: "title"; title: string } \| { type: "file"; fileType: string } \| { type: "icon"; src: string } \| { type: "logo"; image: { src: string; alt?: string } } \| { type: "socials" } \| { type: "button"; action: { href: string; label: string } } \| { type: "icon-button"; iconSrc: string; action: { href: string; label: string } }`	-	Configures the component's content.

Spacing Spacer

Edit this page Follow @shadcnlabs Join community

Divider

Installation

Usage

Examples

Line divider

default

Divider with title

left

center

right

Divider with file type

left

center

right

Divider with icon

left

center

right

Divider with logo

left

center

right

Divider with social icons

left

center

right

Divider with icon and button

left

center

right

Divider with button

left

center

right

API Reference