A collection of beautifully designed, accessible, and customizable email components. Built on React 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 & Spacing

Horizontal dividers, spacers, and visual separators for email layouts.

React Email MJML React JSX Email

Variants

Line Divider

Divider with Title

Divider with Icon

Divider with Icon and Button

Divider with Logo

Divider with Button

Divider with File Type

Vertical Spacer

Installation


$ pnpm dlx shadcn@latest add @emailcn/line-divider

Usage

import { LineDivider } from "@/components/emails/ui-elements/spacing/line-divider";

<LineDivider {...LineDivider.PreviewProps} />

API Reference

Divider

Prop	Type	Default	Description
`theme`	`EmailTheme`	`defaultTheme`	Email theme styling

Progress Bars Blocks

On This Page

Variants Line Divider Divider with Title Divider with Icon Divider with Icon and Button Divider with Logo Divider with Social Icons Divider with Button Divider with File Type Vertical Spacer Installation Usage API Reference Divider

Edit this page Follow @shadcnlabs Join community