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.

Buttons

Email button components with primary, secondary, and text link styles.

React Email MJML React

Variants

Primary Buttons

Primary Buttons with Icon

Secondary Buttons

Secondary Buttons with Icon

Text Link Buttons

Text Link Buttons with Icon

Installation


$ pnpm dlx shadcn@latest add @emailcn/mjml-button

Usage

import { PrimaryButtons } from "@/components/emails/ui-elements/buttons/primary-buttons";

<PrimaryButtons {...PrimaryButtons.PreviewProps} />

API Reference

Button

Prop	Type	Default	Description
`variant`	`"primary" \| "secondary" \| "text"`	`"primary"`	Button style variant
`label`	`string`	-	Button label
`href`	`string`	`"#"`	Button link URL
`theme`	`EmailTheme`	`defaultTheme`	Email theme styling

Avatar Row Container

On This Page

Variants Primary Buttons Primary Buttons with Icon Secondary Buttons Secondary Buttons with Icon Text Link Buttons Text Link Buttons with Icon Installation Usage API Reference Button

Edit this page Follow @shadcnlabs Join community