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

A single email button component with primary, secondary, and text link styles, optional icons, and alignment.

React Email MJML React JSX Email

One Buttons component covers every style. Switch the look with the variant prop, add an optional icon, and control placement with align.

Primary

Primary with Icon

Secondary

Secondary with Icon

Text Link

Text Link with Icon

Installation


$ pnpm dlx shadcn@latest add @emailcn/buttons

Usage

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

<Buttons variant="primary" label="Get Started" href="https://example.com" />
<Buttons variant="secondary" icon="➜" label="Learn More" href="https://example.com/learn" />
<Buttons variant="text" label="Unsubscribe" href="https://example.com" />

API Reference

Prop	Type	Default	Description
`variant`	`"primary" \| "secondary" \| "text"`	`"primary"`	Button style
`label`	`string`	`"Click Here"`	Button label
`href`	`string`	`"#"`	Button link URL
`icon`	`string`	-	Optional leading icon/glyph
`align`	`"left" \| "center" \| "right"`	`"center"`	Horizontal alignment
`theme`	`EmailThemeTokens`	`defaultTheme`	Email theme styling

Avatar Row Container

On This Page

Primary Primary with Icon Secondary Secondary with Icon Text Link Text Link with Icon Installation Usage API Reference

Edit this page Follow @shadcnlabs Join community