# Introduction
**emailcn** provides beautifully designed and customizable email components for [React Email](https://github.com/resend/react-email), [MJML React](https://github.com/faire/mjml-react), and [JSX Email](https://github.com/shellscape/jsx-email), designed to work seamlessly with the [shadcn CLI](https://ui.shadcn.com).
## Philosophy [#philosophy]
emailcn follows the shadcn model for emails: copy-paste components you can own, with zero lock-in and sensible defaults that work immediately.
Email stacks are easy to fragment across one-off templates. emailcn keeps themes, fonts, etc. consistent across blocks and primitives, while still letting you drop down to raw `react-email`, `mjml-react`, or `jsx-email` APIs when needed.
The goal is simple: make emails feel like the rest of your stack — composable, themeable, and easy to customize.
## Why emailcn? [#why-emailcn]
Most email components are either too opinionated or too scattered. emailcn is built for teams that want to ship quickly without giving up control:
* **Own Your Code:** Copy the components into your project and customize everything.
* **Start Fast:** Run one command and render your first email with production-ready defaults.
* **Scale Safely:** Build on React Email, MJML React, or JSX Email directly, then drop to raw APIs when needed.
## Features [#features]
# Installation
## Prerequisites [#prerequisites]
* **React Email** templates: a project with **`react-email`** installed.
* **MJML React** templates: a project with **`@faire/mjml-react`** installed.
* **JSX Email** templates: a project with **`jsx-email`** installed.
Configure the `@emailcn` namespace first, then select the framework in the item path — see [Registry](/docs/registry).
## Installation [#installation]
Run the following command to add any component or block:
```bash
npx shadcn@latest add @emailcn/react-email/block-onboarding-default
```
## Usage [#usage]
Import and use the component:
```tsx
import { OnboardingDefault } from "@/components/email/onboarding-default";
export function WelcomeEmail() {
return Welcome
);
}
```
For registry URLs and namespace configuration, see [Registry](/docs/registry).
# MCP
[MCP](https://modelcontextprotocol.io/) is an open protocol that standardizes how applications provide context to LLMs. The shadcn CLI can register an MCP server so your editor can discover registry components—including items you install from **emailcn** via the same CLI.
## Configure MCP [#configure-mcp]
Run:
```bash
npx shadcn@latest mcp init
```
Choose your MCP client when prompted, then enable the MCP server in that client to finish setup.
## Usage [#usage]
With MCP enabled, you can ask your IDE to work with **emailcn** patterns. Example prompts:
* Add a **React Email** welcome flow using **`block-onboarding-default`**, a **`heroes`** variant, and **`defaultTheme`**.
* Scaffold a **magic link** or **OTP** auth email from **`block-auth-magic-link-default`** / **`block-auth-otp-default`**.
* Build a **receipt** or **notification** layout using existing blocks and **`data-tables`** components.
* Create an **MJML React** variant of the same items from the **`mjml-react`** style — item names are identical across styles and share the same theme tokens.
* Wire **`DefaultFonts`** and a **`tech-fonts`** preset to match a Resend-style demo.
Install items with **`npx shadcn@latest add @emailcn/`** or the **`https://emailcn.run/r/.json`** URL on each docs page (bases: `react-email`, `mjml-react`, `jsx-email`), then import from **`@/components/email/...`** as usual. See the [registry docs](/docs/registry) for configuring the `@emailcn` namespace.
# Registry
The **emailcn** registry ships components, blocks, themes, and font helpers in the [shadcn registry format](https://ui.shadcn.com/docs/registry). Items are namespaced by framework: `react-email/`, `mjml-react/`, or `jsx-email/`.
## Setup [#setup]
Add a **registries** entry for this site. See the [shadcn registry documentation](https://ui.shadcn.com/docs/registry) for all `components.json` fields and behaviors.
```json
{
"registries": {
"@emailcn": "https://emailcn.run/r/{name}.json"
}
}
```
You can replace `@emailcn` with another namespace; it only needs to match what you pass to `shadcn add`.
## Usage [#usage]
Prefix each item with its framework:
```bash
npx shadcn@latest add @emailcn/react-email/button
```
**Themes** are `theme-`:
```bash
npx shadcn@latest add @emailcn/react-email/theme-stripe
```
**Blocks** are `block-`:
```bash
npx shadcn@latest add @emailcn/react-email/block-onboarding-default
```
**Fonts** (React Email and JSX Email styles) — e.g. `default-fonts`, `tech-fonts`:
```bash
npx shadcn@latest add @emailcn/react-email/default-fonts
```
Without a registry alias, use the full item URL:
```bash
npx shadcn@latest add https://emailcn.run/r/react-email/button.json
```
The complete registry index is available at `https://emailcn.run/r/registry.json`.
# Theming
All three renderers use the same `EmailTheme` token shape. React Email and JSX Email convert those tokens into their framework-specific Tailwind configuration, while MJML React applies them directly.
## Install a theme [#install-a-theme]
Themes are registry items named `theme-` under each framework:
```bash
npx shadcn@latest add @emailcn/react-email/theme-default
```
Or paste the full item URL:
```bash
npx shadcn@latest add https://emailcn.run/r/react-email/theme-linear.json
```
## Use with React Email [#use-with-react-email]
```tsx
import { Tailwind } from "react-email";
import { createEmailTailwindConfig } from "@/components/email/email-theme";
import { defaultTheme } from "@/components/email/theme-default";
```
```tsx
{/* ... */}
```
## Use with JSX Email [#use-with-jsx-email]
```tsx
import { EmailTailwind } from "@/components/email/email-theme";
import { defaultTheme } from "@/components/email/theme-default";
```
```tsx
{/* ... */}
```
## Use with MJML React [#use-with-mjml-react]
MJML React components use the tokens directly:
```tsx
import { defaultTheme } from "@/components/email/theme-default";
```
```tsx
Hello
```
## Available Fonts (React Email and JSX Email) [#available-fonts-react-email-and-jsx-email]
Command
Manual
```bash
npx shadcn@latest add @emailcn/jsx-email/block-auth-otp-default
```
**Install the following dependencies:**
```bash
npm install jsx-email
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { AuthOtpDefault } from "@/components/email/auth-otp-default";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/jsx-email/block-invite-default
```
**Install the following dependencies:**
```bash
npm install jsx-email
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { InviteDefault } from "@/components/email/invite-default";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/jsx-email/block-newsletter-default
```
**Install the following dependencies:**
```bash
npm install jsx-email
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { NewsletterDefault } from "@/components/email/newsletter-default";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/jsx-email/block-notification-default
```
**Install the following dependencies:**
```bash
npm install jsx-email
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { NotificationDefault } from "@/components/email/notification-default";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/jsx-email/block-onboarding-default
```
**Install the following dependencies:**
```bash
npm install jsx-email
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { OnboardingDefault } from "@/components/email/onboarding-default";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/jsx-email/block-receipt-default
```
**Install the following dependencies:**
```bash
npm install jsx-email
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { ReceiptDefault } from "@/components/email/receipt-default";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/mjml-react/block-auth-otp-default
```
**Install the following dependencies:**
```bash
npm install @faire/mjml-react mjml
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { AuthOtpDefault } from "@/components/email/auth-otp-default";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/mjml-react/block-invite-default
```
**Install the following dependencies:**
```bash
npm install @faire/mjml-react mjml
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { InviteDefault } from "@/components/email/invite-default";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/mjml-react/block-newsletter-default
```
**Install the following dependencies:**
```bash
npm install @faire/mjml-react mjml
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { NewsletterDefault } from "@/components/email/newsletter-default";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/mjml-react/block-notification-default
```
**Install the following dependencies:**
```bash
npm install @faire/mjml-react mjml
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { NotificationDefault } from "@/components/email/notification-default";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/mjml-react/block-onboarding-default
```
**Install the following dependencies:**
```bash
npm install @faire/mjml-react mjml
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { OnboardingDefault } from "@/components/email/onboarding-default";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/mjml-react/block-receipt-default
```
**Install the following dependencies:**
```bash
npm install @faire/mjml-react mjml
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { ReceiptDefault } from "@/components/email/receipt-default";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/block-auth-otp-default
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { AuthOtpDefault } from "@/components/email/auth-otp-default";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/block-invite-default
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { InviteDefault } from "@/components/email/invite-default";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/block-newsletter-default
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { NewsletterDefault } from "@/components/email/newsletter-default";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/block-notification-default
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { NotificationDefault } from "@/components/email/notification-default";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/block-onboarding-default
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { OnboardingDefault } from "@/components/email/onboarding-default";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/block-receipt-default
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { ReceiptDefault } from "@/components/email/receipt-default";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/collage-fonts
```
**Install the following dependencies:**
```bash
npm install react-email
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { CollageFonts } from "@/components/email/font-collage";
export default function Email() {
return (
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/default-fonts
```
**Install the following dependencies:**
```bash
npm install react-email
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { DefaultFonts } from "@/components/email/font-default";
export default function Email() {
return (
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/dither-fonts
```
**Install the following dependencies:**
```bash
npm install react-email
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { DitherFonts } from "@/components/email/font-dither";
export default function Email() {
return (
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/skin-fonts
```
**Install the following dependencies:**
```bash
npm install react-email
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { SkinFonts } from "@/components/email/font-skin";
export default function Email() {
return (
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/tech-fonts
```
**Install the following dependencies:**
```bash
npm install react-email
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { TechFonts } from "@/components/email/font-tech";
export default function Email() {
return (
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/theme-airbnb
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { Tailwind } from "react-email";
import { createEmailTailwindConfig } from "@/components/email/email-theme";
import { airbnbTheme } from "@/components/email/theme-airbnb";
{/* Your email content */}
;
```
# Default Theme
## Installation [#installation]
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/theme-default
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { Tailwind } from "react-email";
import { createEmailTailwindConfig } from "@/components/email/email-theme";
import { defaultTheme } from "@/components/email/theme-default";
{/* Your email content */}
;
```
## Theme Tokens [#theme-tokens]
| Token | Value |
| ----------------- | ------------------------------------------------------------------- |
| `colorPrimary` | `#111827` |
| `colorBackground` | `#ffffff` |
| `colorText` | `#111827` |
| `colorTextMuted` | `#6b7280` |
| `colorBorder` | `#e5e7eb` |
| `fontFamily` | `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif` |
| `borderRadius` | `6px` |
| `containerWidth` | `600px` |
## Button Styles [#button-styles]
### Primary Button [#primary-button]
| Property | Value |
| ------------- | --------------- |
| Background | `#111827` |
| Text | `#ffffff` |
| Border Radius | `6px` |
| Padding | `24px` x `12px` |
| Font Size | `14px` |
| Font Weight | `500` |
### Secondary Button [#secondary-button]
| Property | Value |
| ------------- | ------------------- |
| Background | `transparent` |
| Text | `#111827` |
| Border | `1px solid #e5e7eb` |
| Border Radius | `6px` |
| Padding | `24px` x `12px` |
| Font Size | `14px` |
| Font Weight | `500` |
# GitHub Theme
## Installation [#installation]
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/theme-github
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { Tailwind } from "react-email";
import { createEmailTailwindConfig } from "@/components/email/email-theme";
import { githubTheme } from "@/components/email/theme-github";
{/* Your email content */}
;
```
# Linear Theme
## Installation [#installation]
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/theme-linear
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { Tailwind } from "react-email";
import { createEmailTailwindConfig } from "@/components/email/email-theme";
import { linearTheme } from "@/components/email/theme-linear";
{/* Your email content */}
;
```
## Theme Tokens [#theme-tokens]
| Token | Value |
| ----------------- | ------------------------------------ |
| `colorPrimary` | `#5e6ad2` |
| `colorBackground` | `#ffffff` |
| `colorText` | `#111827` |
| `colorTextMuted` | `#6b7280` |
| `colorBorder` | `#e5e7eb` |
| `fontFamily` | `"Inter", -apple-system, sans-serif` |
| `borderRadius` | `6px` |
| `containerWidth` | `600px` |
## Button Styles [#button-styles]
### Primary Button [#primary-button]
| Property | Value |
| ------------- | --------------- |
| Background | `#5e6ad2` |
| Text | `#ffffff` |
| Border Radius | `6px` |
| Padding | `24px` x `12px` |
| Font Size | `14px` |
| Font Weight | `500` |
### Secondary Button [#secondary-button]
| Property | Value |
| ------------- | ------------------- |
| Background | `transparent` |
| Text | `#5e6ad2` |
| Border | `1px solid #5e6ad2` |
| Border Radius | `6px` |
| Padding | `24px` x `12px` |
| Font Size | `14px` |
| Font Weight | `500` |
# Notion Theme
## Installation [#installation]
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/theme-notion
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { Tailwind } from "react-email";
import { createEmailTailwindConfig } from "@/components/email/email-theme";
import { notionTheme } from "@/components/email/theme-notion";
{/* Your email content */}
;
```
# Raycast Theme
## Installation [#installation]
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/theme-raycast
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { Tailwind } from "react-email";
import { createEmailTailwindConfig } from "@/components/email/email-theme";
import { raycastTheme } from "@/components/email/theme-raycast";
{/* Your email content */}
;
```
# Slack Theme
## Installation [#installation]
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/theme-slack
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { Tailwind } from "react-email";
import { createEmailTailwindConfig } from "@/components/email/email-theme";
import { slackTheme } from "@/components/email/theme-slack";
{/* Your email content */}
;
```
# Stripe Theme
## Installation [#installation]
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/theme-stripe
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { Tailwind } from "react-email";
import { createEmailTailwindConfig } from "@/components/email/email-theme";
import { stripeTheme } from "@/components/email/theme-stripe";
{/* Your email content */}
;
```
# Twitch Theme
## Installation [#installation]
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/theme-twitch
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { Tailwind } from "react-email";
import { createEmailTailwindConfig } from "@/components/email/email-theme";
import { twitchTheme } from "@/components/email/theme-twitch";
{/* Your email content */}
;
```
# Vercel Theme
## Installation [#installation]
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/theme-vercel
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { Tailwind } from "react-email";
import { createEmailTailwindConfig } from "@/components/email/email-theme";
import { vercelTheme } from "@/components/email/theme-vercel";
{/* Your email content */}
;
```
## Theme Tokens [#theme-tokens]
| Token | Value |
| ----------------- | --------------------------------------------- |
| `colorPrimary` | `#ffffff` |
| `colorBackground` | `#000000` |
| `colorText` | `#ffffff` |
| `colorTextMuted` | `#a1a1a1` |
| `colorBorder` | `#333333` |
| `fontFamily` | `"Geist", "Inter", -apple-system, sans-serif` |
| `borderRadius` | `6px` |
| `containerWidth` | `600px` |
## Button Styles [#button-styles]
### Primary Button [#primary-button]
| Property | Value |
| ------------- | --------------- |
| Background | `#ffffff` |
| Text | `#000000` |
| Border Radius | `6px` |
| Padding | `24px` x `12px` |
| Font Size | `14px` |
| Font Weight | `500` |
### Secondary Button [#secondary-button]
| Property | Value |
| ------------- | ------------------- |
| Background | `transparent` |
| Text | `#ffffff` |
| Border | `1px solid #333333` |
| Border Radius | `6px` |
| Padding | `24px` x `12px` |
| Font Size | `14px` |
| Font Weight | `500` |
# Category Preview
Command
Manual
```bash
npx shadcn@latest add @emailcn/jsx-email/category-preview
```
**Install the following dependencies:**
```bash
npm install jsx-email
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { CategoryPreview } from "@/components/email/category-preview";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/jsx-email/product-list
```
**Install the following dependencies:**
```bash
npm install jsx-email
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { ProductList } from "@/components/email/product-list";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/jsx-email/reviews
```
**Install the following dependencies:**
```bash
npm install jsx-email
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { Reviews } from "@/components/email/reviews";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/jsx-email/shopping-cart
```
**Install the following dependencies:**
```bash
npm install jsx-email
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { ShoppingCart } from "@/components/email/shopping-cart";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/jsx-email/content
```
**Install the following dependencies:**
```bash
npm install jsx-email
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { Content } from "@/components/email/content";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/jsx-email/faq
```
**Install the following dependencies:**
```bash
npm install jsx-email
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { Faq } from "@/components/email/faq";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/jsx-email/logo-cloud
```
**Install the following dependencies:**
```bash
npm install jsx-email
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { LogoCloud } from "@/components/email/logo-cloud";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/jsx-email/social-links
```
**Install the following dependencies:**
```bash
npm install jsx-email
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { SocialLinks } from "@/components/email/social-links";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/jsx-email/team
```
**Install the following dependencies:**
```bash
npm install jsx-email
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { Team } from "@/components/email/team";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/jsx-email/testimonial
```
**Install the following dependencies:**
```bash
npm install jsx-email
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { Testimonial } from "@/components/email/testimonial";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/jsx-email/button
```
**Install the following dependencies:**
```bash
npm install jsx-email
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { Button } from "@/components/email/button";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/jsx-email/container
```
**Install the following dependencies:**
```bash
npm install jsx-email
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { Container } from "@/components/email/container";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/jsx-email/data-table
```
**Install the following dependencies:**
```bash
npm install jsx-email
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { DataTable } from "@/components/email/data-table";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/jsx-email/grid
```
**Install the following dependencies:**
```bash
npm install jsx-email
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { Grid } from "@/components/email/grid";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/jsx-email/pills
```
**Install the following dependencies:**
```bash
npm install jsx-email
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { Pills } from "@/components/email/pills";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/jsx-email/progress
```
**Install the following dependencies:**
```bash
npm install jsx-email
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { Progress } from "@/components/email/progress";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/mjml-react/category-preview
```
**Install the following dependencies:**
```bash
npm install @faire/mjml-react mjml
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { CategoryPreview } from "@/components/email/category-preview";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/mjml-react/product-list
```
**Install the following dependencies:**
```bash
npm install @faire/mjml-react mjml
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { ProductList } from "@/components/email/product-list";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/mjml-react/reviews
```
**Install the following dependencies:**
```bash
npm install @faire/mjml-react mjml
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { Reviews } from "@/components/email/reviews";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/mjml-react/shopping-cart
```
**Install the following dependencies:**
```bash
npm install @faire/mjml-react mjml
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { ShoppingCart } from "@/components/email/shopping-cart";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/mjml-react/content
```
**Install the following dependencies:**
```bash
npm install @faire/mjml-react mjml
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { Content } from "@/components/email/content";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/mjml-react/faq
```
**Install the following dependencies:**
```bash
npm install @faire/mjml-react mjml
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { Faq } from "@/components/email/faq";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/mjml-react/logo-cloud
```
**Install the following dependencies:**
```bash
npm install @faire/mjml-react mjml
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { LogoCloud } from "@/components/email/logo-cloud";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/mjml-react/social-links
```
**Install the following dependencies:**
```bash
npm install @faire/mjml-react mjml
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { SocialLinks } from "@/components/email/social-links";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/mjml-react/team
```
**Install the following dependencies:**
```bash
npm install @faire/mjml-react mjml
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { Team } from "@/components/email/team";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/mjml-react/testimonial
```
**Install the following dependencies:**
```bash
npm install @faire/mjml-react mjml
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { Testimonial } from "@/components/email/testimonial";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/mjml-react/button
```
**Install the following dependencies:**
```bash
npm install @faire/mjml-react mjml
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { Button } from "@/components/email/button";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/mjml-react/container
```
**Install the following dependencies:**
```bash
npm install @faire/mjml-react mjml
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { Container } from "@/components/email/container";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/mjml-react/data-table
```
**Install the following dependencies:**
```bash
npm install @faire/mjml-react mjml
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { DataTable } from "@/components/email/data-table";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/mjml-react/grid
```
**Install the following dependencies:**
```bash
npm install @faire/mjml-react mjml
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { Grid } from "@/components/email/grid";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/mjml-react/pills
```
**Install the following dependencies:**
```bash
npm install @faire/mjml-react mjml
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { Pills } from "@/components/email/pills";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/mjml-react/progress
```
**Install the following dependencies:**
```bash
npm install @faire/mjml-react mjml
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { Progress } from "@/components/email/progress";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/category-preview
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { CategoryPreview } from "@/components/email/category-preview";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/product-list
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { ProductList } from "@/components/email/product-list";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/reviews
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { Reviews } from "@/components/email/reviews";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/shopping-cart
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { ShoppingCart } from "@/components/email/shopping-cart";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/content
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { Content } from "@/components/email/content";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/faq
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { Faq } from "@/components/email/faq";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/logo-cloud
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { LogoCloud } from "@/components/email/logo-cloud";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/social-links
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { SocialLinks } from "@/components/email/social-links";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/team
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { Team } from "@/components/email/team";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/testimonial
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { Testimonial } from "@/components/email/testimonial";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/button
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { Button } from "@/components/email/button";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/container
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { Container } from "@/components/email/container";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/data-table
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { DataTable } from "@/components/email/data-table";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/grid
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { Grid } from "@/components/email/grid";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/pills
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { Pills } from "@/components/email/pills";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/progress
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { Progress } from "@/components/email/progress";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/jsx-email/billing-order-summary
```
**Install the following dependencies:**
```bash
npm install jsx-email
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { BillingOrderSummary } from "@/components/email/billing-order-summary";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/jsx-email/order-summary-table
```
**Install the following dependencies:**
```bash
npm install jsx-email
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { OrderSummaryTable } from "@/components/email/order-summary-table";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/jsx-email/masonry-product-detail
```
**Install the following dependencies:**
```bash
npm install jsx-email
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { MasonryProductDetail } from "@/components/email/masonry-product-detail";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/jsx-email/single-image-product-detail
```
**Install the following dependencies:**
```bash
npm install jsx-email
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { SingleImageProductDetail } from "@/components/email/single-image-product-detail";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/jsx-email/split-product-detail
```
**Install the following dependencies:**
```bash
npm install jsx-email
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { SplitProductDetail } from "@/components/email/split-product-detail";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/jsx-email/three-image-product-detail
```
**Install the following dependencies:**
```bash
npm install jsx-email
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { ThreeImageProductDetail } from "@/components/email/three-image-product-detail";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/jsx-email/two-image-product-detail
```
**Install the following dependencies:**
```bash
npm install jsx-email
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { TwoImageProductDetail } from "@/components/email/two-image-product-detail";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/jsx-email/bento-image-grid
```
**Install the following dependencies:**
```bash
npm install jsx-email
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { BentoImageGrid } from "@/components/email/bento-image-grid";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/jsx-email/bento-product-grid
```
**Install the following dependencies:**
```bash
npm install jsx-email
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { BentoProductGrid } from "@/components/email/bento-product-grid";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/jsx-email/bento-stats-grid
```
**Install the following dependencies:**
```bash
npm install jsx-email
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { BentoStatsGrid } from "@/components/email/bento-stats-grid";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/jsx-email/blog-grid
```
**Install the following dependencies:**
```bash
npm install jsx-email
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { BlogGrid } from "@/components/email/blog-grid";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/jsx-email/featured-blog-post
```
**Install the following dependencies:**
```bash
npm install jsx-email
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { FeaturedBlogPost } from "@/components/email/featured-blog-post";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/jsx-email/horizontal-blog-post
```
**Install the following dependencies:**
```bash
npm install jsx-email
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { HorizontalBlogPost } from "@/components/email/horizontal-blog-post";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/jsx-email/podcast-blog
```
**Install the following dependencies:**
```bash
npm install jsx-email
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { PodcastBlog } from "@/components/email/podcast-blog";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/jsx-email/card-coupons
```
**Install the following dependencies:**
```bash
npm install jsx-email
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { CardCoupons } from "@/components/email/card-coupons";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/jsx-email/coupons-with-centered-text
```
**Install the following dependencies:**
```bash
npm install jsx-email
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { CouponsWithCenteredText } from "@/components/email/coupons-with-centered-text";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/jsx-email/coupons-with-content-overlayed
```
**Install the following dependencies:**
```bash
npm install jsx-email
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { CouponsWithContentOverlayed } from "@/components/email/coupons-with-content-overlayed";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/jsx-email/avatar-call-to-action
```
**Install the following dependencies:**
```bash
npm install jsx-email
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { AvatarCallToAction } from "@/components/email/avatar-call-to-action";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/jsx-email/background-call-to-action
```
**Install the following dependencies:**
```bash
npm install jsx-email
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { BackgroundCallToAction } from "@/components/email/background-call-to-action";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/jsx-email/call-to-action
```
**Install the following dependencies:**
```bash
npm install jsx-email
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { CallToAction } from "@/components/email/call-to-action";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/jsx-email/collage-call-to-action
```
**Install the following dependencies:**
```bash
npm install jsx-email
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { CollageCallToAction } from "@/components/email/collage-call-to-action";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/jsx-email/image-strip-call-to-action
```
**Install the following dependencies:**
```bash
npm install jsx-email
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { ImageStripCallToAction } from "@/components/email/image-strip-call-to-action";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/jsx-email/top-image-call-to-action
```
**Install the following dependencies:**
```bash
npm install jsx-email
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { TopImageCallToAction } from "@/components/email/top-image-call-to-action";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/jsx-email/image-feature
```
**Install the following dependencies:**
```bash
npm install jsx-email
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { ImageFeature } from "@/components/email/image-feature";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/jsx-email/portrait-feature
```
**Install the following dependencies:**
```bash
npm install jsx-email
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { PortraitFeature } from "@/components/email/portrait-feature";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/jsx-email/product-images-feature
```
**Install the following dependencies:**
```bash
npm install jsx-email
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { ProductImagesFeature } from "@/components/email/product-images-feature";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/jsx-email/tall-background-images-feature
```
**Install the following dependencies:**
```bash
npm install jsx-email
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { TallBackgroundImagesFeature } from "@/components/email/tall-background-images-feature";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/jsx-email/navigation-footer
```
**Install the following dependencies:**
```bash
npm install jsx-email
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { NavigationFooter } from "@/components/email/navigation-footer";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/jsx-email/promotion-footer
```
**Install the following dependencies:**
```bash
npm install jsx-email
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { PromotionFooter } from "@/components/email/promotion-footer";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/jsx-email/utility-footer
```
**Install the following dependencies:**
```bash
npm install jsx-email
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { UtilityFooter } from "@/components/email/utility-footer";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/jsx-email/header-with-logo-and-badge
```
**Install the following dependencies:**
```bash
npm install jsx-email
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { HeaderWithLogoAndBadge } from "@/components/email/header-with-logo-and-badge";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/jsx-email/header-with-logo-and-finance-stats
```
**Install the following dependencies:**
```bash
npm install jsx-email
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { HeaderWithLogoAndFinanceStats } from "@/components/email/header-with-logo-and-finance-stats";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/jsx-email/header-with-logo-and-menu
```
**Install the following dependencies:**
```bash
npm install jsx-email
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { HeaderWithLogoAndMenu } from "@/components/email/header-with-logo-and-menu";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/jsx-email/header-with-logo-and-social-icons
```
**Install the following dependencies:**
```bash
npm install jsx-email
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { HeaderWithLogoAndSocialIcons } from "@/components/email/header-with-logo-and-social-icons";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/jsx-email/header-with-logo
```
**Install the following dependencies:**
```bash
npm install jsx-email
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { HeaderWithLogo } from "@/components/email/header-with-logo";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/jsx-email/header-with-user-details
```
**Install the following dependencies:**
```bash
npm install jsx-email
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { HeaderWithUserDetails } from "@/components/email/header-with-user-details";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/jsx-email/image-grid-hero
```
**Install the following dependencies:**
```bash
npm install jsx-email
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { ImageGridHero } from "@/components/email/image-grid-hero";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/jsx-email/overlap-hero
```
**Install the following dependencies:**
```bash
npm install jsx-email
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { OverlapHero } from "@/components/email/overlap-hero";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/jsx-email/overlay-hero
```
**Install the following dependencies:**
```bash
npm install jsx-email
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { OverlayHero } from "@/components/email/overlay-hero";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/jsx-email/split-hero
```
**Install the following dependencies:**
```bash
npm install jsx-email
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { SplitHero } from "@/components/email/split-hero";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/jsx-email/featured-image-grid
```
**Install the following dependencies:**
```bash
npm install jsx-email
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { FeaturedImageGrid } from "@/components/email/featured-image-grid";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/jsx-email/full-width-image
```
**Install the following dependencies:**
```bash
npm install jsx-email
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { FullWidthImage } from "@/components/email/full-width-image";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/jsx-email/image-grid
```
**Install the following dependencies:**
```bash
npm install jsx-email
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { ImageGrid } from "@/components/email/image-grid";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/jsx-email/masonry-image-grid
```
**Install the following dependencies:**
```bash
npm install jsx-email
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { MasonryImageGrid } from "@/components/email/masonry-image-grid";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/jsx-email/purchase-pricing
```
**Install the following dependencies:**
```bash
npm install jsx-email
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { PurchasePricing } from "@/components/email/purchase-pricing";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/jsx-email/subscription-pricing
```
**Install the following dependencies:**
```bash
npm install jsx-email
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { SubscriptionPricing } from "@/components/email/subscription-pricing";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/jsx-email/collection-stats
```
**Install the following dependencies:**
```bash
npm install jsx-email
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { CollectionStats } from "@/components/email/collection-stats";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/jsx-email/milestone-stats
```
**Install the following dependencies:**
```bash
npm install jsx-email
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { MilestoneStats } from "@/components/email/milestone-stats";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/jsx-email/spotlight-stats
```
**Install the following dependencies:**
```bash
npm install jsx-email
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { SpotlightStats } from "@/components/email/spotlight-stats";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/jsx-email/stacked-stats
```
**Install the following dependencies:**
```bash
npm install jsx-email
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { StackedStats } from "@/components/email/stacked-stats";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/jsx-email/payment-timeline
```
**Install the following dependencies:**
```bash
npm install jsx-email
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { PaymentTimeline } from "@/components/email/payment-timeline";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/jsx-email/timeline
```
**Install the following dependencies:**
```bash
npm install jsx-email
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { Timeline } from "@/components/email/timeline";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/jsx-email/avatar-details
```
**Install the following dependencies:**
```bash
npm install jsx-email
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { AvatarDetails } from "@/components/email/avatar-details";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/jsx-email/avatar-group
```
**Install the following dependencies:**
```bash
npm install jsx-email
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { AvatarGroup } from "@/components/email/avatar-group";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/jsx-email/divider
```
**Install the following dependencies:**
```bash
npm install jsx-email
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { Divider } from "@/components/email/divider";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/jsx-email/spacer
```
**Install the following dependencies:**
```bash
npm install jsx-email
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { Spacer } from "@/components/email/spacer";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/mjml-react/billing-order-summary
```
**Install the following dependencies:**
```bash
npm install @faire/mjml-react mjml
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { BillingOrderSummary } from "@/components/email/billing-order-summary";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/mjml-react/order-summary-table
```
**Install the following dependencies:**
```bash
npm install @faire/mjml-react mjml
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { OrderSummaryTable } from "@/components/email/order-summary-table";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/mjml-react/masonry-product-detail
```
**Install the following dependencies:**
```bash
npm install @faire/mjml-react mjml
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { MasonryProductDetail } from "@/components/email/masonry-product-detail";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/mjml-react/single-image-product-detail
```
**Install the following dependencies:**
```bash
npm install @faire/mjml-react mjml
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { SingleImageProductDetail } from "@/components/email/single-image-product-detail";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/mjml-react/split-product-detail
```
**Install the following dependencies:**
```bash
npm install @faire/mjml-react mjml
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { SplitProductDetail } from "@/components/email/split-product-detail";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/mjml-react/three-image-product-detail
```
**Install the following dependencies:**
```bash
npm install @faire/mjml-react mjml
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { ThreeImageProductDetail } from "@/components/email/three-image-product-detail";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/mjml-react/two-image-product-detail
```
**Install the following dependencies:**
```bash
npm install @faire/mjml-react mjml
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { TwoImageProductDetail } from "@/components/email/two-image-product-detail";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/mjml-react/bento-image-grid
```
**Install the following dependencies:**
```bash
npm install @faire/mjml-react mjml
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { BentoImageGrid } from "@/components/email/bento-image-grid";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/mjml-react/bento-product-grid
```
**Install the following dependencies:**
```bash
npm install @faire/mjml-react mjml
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { BentoProductGrid } from "@/components/email/bento-product-grid";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/mjml-react/bento-stats-grid
```
**Install the following dependencies:**
```bash
npm install @faire/mjml-react mjml
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { BentoStatsGrid } from "@/components/email/bento-stats-grid";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/mjml-react/blog-grid
```
**Install the following dependencies:**
```bash
npm install @faire/mjml-react mjml
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { BlogGrid } from "@/components/email/blog-grid";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/mjml-react/featured-blog-post
```
**Install the following dependencies:**
```bash
npm install @faire/mjml-react mjml
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { FeaturedBlogPost } from "@/components/email/featured-blog-post";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/mjml-react/horizontal-blog-post
```
**Install the following dependencies:**
```bash
npm install @faire/mjml-react mjml
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { HorizontalBlogPost } from "@/components/email/horizontal-blog-post";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/mjml-react/podcast-blog
```
**Install the following dependencies:**
```bash
npm install @faire/mjml-react mjml
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { PodcastBlog } from "@/components/email/podcast-blog";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/mjml-react/card-coupons
```
**Install the following dependencies:**
```bash
npm install @faire/mjml-react mjml
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { CardCoupons } from "@/components/email/card-coupons";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/mjml-react/coupons-with-centered-text
```
**Install the following dependencies:**
```bash
npm install @faire/mjml-react mjml
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { CouponsWithCenteredText } from "@/components/email/coupons-with-centered-text";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/mjml-react/coupons-with-content-overlayed
```
**Install the following dependencies:**
```bash
npm install @faire/mjml-react mjml
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { CouponsWithContentOverlayed } from "@/components/email/coupons-with-content-overlayed";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/mjml-react/avatar-call-to-action
```
**Install the following dependencies:**
```bash
npm install @faire/mjml-react mjml
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { AvatarCallToAction } from "@/components/email/avatar-call-to-action";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/mjml-react/background-call-to-action
```
**Install the following dependencies:**
```bash
npm install @faire/mjml-react mjml
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { BackgroundCallToAction } from "@/components/email/background-call-to-action";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/mjml-react/call-to-action
```
**Install the following dependencies:**
```bash
npm install @faire/mjml-react mjml
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { CallToAction } from "@/components/email/call-to-action";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/mjml-react/collage-call-to-action
```
**Install the following dependencies:**
```bash
npm install @faire/mjml-react mjml
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { CollageCallToAction } from "@/components/email/collage-call-to-action";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/mjml-react/image-strip-call-to-action
```
**Install the following dependencies:**
```bash
npm install @faire/mjml-react mjml
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { ImageStripCallToAction } from "@/components/email/image-strip-call-to-action";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/mjml-react/top-image-call-to-action
```
**Install the following dependencies:**
```bash
npm install @faire/mjml-react mjml
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { TopImageCallToAction } from "@/components/email/top-image-call-to-action";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/mjml-react/image-feature
```
**Install the following dependencies:**
```bash
npm install @faire/mjml-react mjml
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { ImageFeature } from "@/components/email/image-feature";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/mjml-react/portrait-feature
```
**Install the following dependencies:**
```bash
npm install @faire/mjml-react mjml
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { PortraitFeature } from "@/components/email/portrait-feature";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/mjml-react/product-images-feature
```
**Install the following dependencies:**
```bash
npm install @faire/mjml-react mjml
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { ProductImagesFeature } from "@/components/email/product-images-feature";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/mjml-react/tall-background-images-feature
```
**Install the following dependencies:**
```bash
npm install @faire/mjml-react mjml
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { TallBackgroundImagesFeature } from "@/components/email/tall-background-images-feature";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/mjml-react/navigation-footer
```
**Install the following dependencies:**
```bash
npm install @faire/mjml-react mjml
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { NavigationFooter } from "@/components/email/navigation-footer";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/mjml-react/promotion-footer
```
**Install the following dependencies:**
```bash
npm install @faire/mjml-react mjml
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { PromotionFooter } from "@/components/email/promotion-footer";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/mjml-react/utility-footer
```
**Install the following dependencies:**
```bash
npm install @faire/mjml-react mjml
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { UtilityFooter } from "@/components/email/utility-footer";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/mjml-react/header-with-logo-and-badge
```
**Install the following dependencies:**
```bash
npm install @faire/mjml-react mjml
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { HeaderWithLogoAndBadge } from "@/components/email/header-with-logo-and-badge";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/mjml-react/header-with-logo-and-finance-stats
```
**Install the following dependencies:**
```bash
npm install @faire/mjml-react mjml
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { HeaderWithLogoAndFinanceStats } from "@/components/email/header-with-logo-and-finance-stats";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/mjml-react/header-with-logo-and-menu
```
**Install the following dependencies:**
```bash
npm install @faire/mjml-react mjml
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { HeaderWithLogoAndMenu } from "@/components/email/header-with-logo-and-menu";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/mjml-react/header-with-logo-and-social-icons
```
**Install the following dependencies:**
```bash
npm install @faire/mjml-react mjml
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { HeaderWithLogoAndSocialIcons } from "@/components/email/header-with-logo-and-social-icons";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/mjml-react/header-with-logo
```
**Install the following dependencies:**
```bash
npm install @faire/mjml-react mjml
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { HeaderWithLogo } from "@/components/email/header-with-logo";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/mjml-react/header-with-user-details
```
**Install the following dependencies:**
```bash
npm install @faire/mjml-react mjml
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { HeaderWithUserDetails } from "@/components/email/header-with-user-details";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/mjml-react/image-grid-hero
```
**Install the following dependencies:**
```bash
npm install @faire/mjml-react mjml
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { ImageGridHero } from "@/components/email/image-grid-hero";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/mjml-react/overlap-hero
```
**Install the following dependencies:**
```bash
npm install @faire/mjml-react mjml
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { OverlapHero } from "@/components/email/overlap-hero";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/mjml-react/overlay-hero
```
**Install the following dependencies:**
```bash
npm install @faire/mjml-react mjml
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { OverlayHero } from "@/components/email/overlay-hero";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/mjml-react/split-hero
```
**Install the following dependencies:**
```bash
npm install @faire/mjml-react mjml
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { SplitHero } from "@/components/email/split-hero";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/mjml-react/featured-image-grid
```
**Install the following dependencies:**
```bash
npm install @faire/mjml-react mjml
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { FeaturedImageGrid } from "@/components/email/featured-image-grid";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/mjml-react/full-width-image
```
**Install the following dependencies:**
```bash
npm install @faire/mjml-react mjml
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { FullWidthImage } from "@/components/email/full-width-image";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/mjml-react/image-grid
```
**Install the following dependencies:**
```bash
npm install @faire/mjml-react mjml
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { ImageGrid } from "@/components/email/image-grid";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/mjml-react/masonry-image-grid
```
**Install the following dependencies:**
```bash
npm install @faire/mjml-react mjml
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { MasonryImageGrid } from "@/components/email/masonry-image-grid";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/mjml-react/purchase-pricing
```
**Install the following dependencies:**
```bash
npm install @faire/mjml-react mjml
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { PurchasePricing } from "@/components/email/purchase-pricing";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/mjml-react/subscription-pricing
```
**Install the following dependencies:**
```bash
npm install @faire/mjml-react mjml
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { SubscriptionPricing } from "@/components/email/subscription-pricing";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/mjml-react/collection-stats
```
**Install the following dependencies:**
```bash
npm install @faire/mjml-react mjml
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { CollectionStats } from "@/components/email/collection-stats";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/mjml-react/milestone-stats
```
**Install the following dependencies:**
```bash
npm install @faire/mjml-react mjml
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { MilestoneStats } from "@/components/email/milestone-stats";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/mjml-react/spotlight-stats
```
**Install the following dependencies:**
```bash
npm install @faire/mjml-react mjml
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { SpotlightStats } from "@/components/email/spotlight-stats";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/mjml-react/stacked-stats
```
**Install the following dependencies:**
```bash
npm install @faire/mjml-react mjml
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { StackedStats } from "@/components/email/stacked-stats";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/mjml-react/payment-timeline
```
**Install the following dependencies:**
```bash
npm install @faire/mjml-react mjml
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { PaymentTimeline } from "@/components/email/payment-timeline";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/mjml-react/timeline
```
**Install the following dependencies:**
```bash
npm install @faire/mjml-react mjml
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { Timeline } from "@/components/email/timeline";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/mjml-react/avatar-details
```
**Install the following dependencies:**
```bash
npm install @faire/mjml-react mjml
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { AvatarDetails } from "@/components/email/avatar-details";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/mjml-react/avatar-group
```
**Install the following dependencies:**
```bash
npm install @faire/mjml-react mjml
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { AvatarGroup } from "@/components/email/avatar-group";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/mjml-react/divider
```
**Install the following dependencies:**
```bash
npm install @faire/mjml-react mjml
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { Divider } from "@/components/email/divider";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/mjml-react/spacer
```
**Install the following dependencies:**
```bash
npm install @faire/mjml-react mjml
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { Spacer } from "@/components/email/spacer";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/billing-order-summary
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { BillingOrderSummary } from "@/components/email/billing-order-summary";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/order-summary-table
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { OrderSummaryTable } from "@/components/email/order-summary-table";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/masonry-product-detail
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { MasonryProductDetail } from "@/components/email/masonry-product-detail";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/single-image-product-detail
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { SingleImageProductDetail } from "@/components/email/single-image-product-detail";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/split-product-detail
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { SplitProductDetail } from "@/components/email/split-product-detail";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/three-image-product-detail
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { ThreeImageProductDetail } from "@/components/email/three-image-product-detail";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/two-image-product-detail
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { TwoImageProductDetail } from "@/components/email/two-image-product-detail";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/bento-image-grid
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { BentoImageGrid } from "@/components/email/bento-image-grid";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/bento-product-grid
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { BentoProductGrid } from "@/components/email/bento-product-grid";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/bento-stats-grid
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { BentoStatsGrid } from "@/components/email/bento-stats-grid";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/blog-grid
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { BlogGrid } from "@/components/email/blog-grid";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/featured-blog-post
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { FeaturedBlogPost } from "@/components/email/featured-blog-post";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/horizontal-blog-post
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { HorizontalBlogPost } from "@/components/email/horizontal-blog-post";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/podcast-blog
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { PodcastBlog } from "@/components/email/podcast-blog";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/card-coupons
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { CardCoupons } from "@/components/email/card-coupons";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/coupons-with-centered-text
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { CouponsWithCenteredText } from "@/components/email/coupons-with-centered-text";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/coupons-with-content-overlayed
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { CouponsWithContentOverlayed } from "@/components/email/coupons-with-content-overlayed";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/avatar-call-to-action
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { AvatarCallToAction } from "@/components/email/avatar-call-to-action";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/background-call-to-action
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { BackgroundCallToAction } from "@/components/email/background-call-to-action";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/call-to-action
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { CallToAction } from "@/components/email/call-to-action";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/collage-call-to-action
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { CollageCallToAction } from "@/components/email/collage-call-to-action";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/image-strip-call-to-action
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { ImageStripCallToAction } from "@/components/email/image-strip-call-to-action";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/top-image-call-to-action
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { TopImageCallToAction } from "@/components/email/top-image-call-to-action";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/image-feature
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { ImageFeature } from "@/components/email/image-feature";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/portrait-feature
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { PortraitFeature } from "@/components/email/portrait-feature";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/product-images-feature
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { ProductImagesFeature } from "@/components/email/product-images-feature";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/tall-background-images-feature
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { TallBackgroundImagesFeature } from "@/components/email/tall-background-images-feature";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/navigation-footer
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { NavigationFooter } from "@/components/email/navigation-footer";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/promotion-footer
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { PromotionFooter } from "@/components/email/promotion-footer";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/utility-footer
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { UtilityFooter } from "@/components/email/utility-footer";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/header-with-logo-and-badge
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { HeaderWithLogoAndBadge } from "@/components/email/header-with-logo-and-badge";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/header-with-logo-and-finance-stats
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { HeaderWithLogoAndFinanceStats } from "@/components/email/header-with-logo-and-finance-stats";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/header-with-logo-and-menu
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { HeaderWithLogoAndMenu } from "@/components/email/header-with-logo-and-menu";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/header-with-logo-and-social-icons
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { HeaderWithLogoAndSocialIcons } from "@/components/email/header-with-logo-and-social-icons";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/header-with-logo
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { HeaderWithLogo } from "@/components/email/header-with-logo";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/header-with-user-details
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { HeaderWithUserDetails } from "@/components/email/header-with-user-details";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/image-grid-hero
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { ImageGridHero } from "@/components/email/image-grid-hero";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/overlap-hero
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { OverlapHero } from "@/components/email/overlap-hero";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/overlay-hero
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { OverlayHero } from "@/components/email/overlay-hero";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/split-hero
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { SplitHero } from "@/components/email/split-hero";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/featured-image-grid
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { FeaturedImageGrid } from "@/components/email/featured-image-grid";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/full-width-image
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { FullWidthImage } from "@/components/email/full-width-image";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/image-grid
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { ImageGrid } from "@/components/email/image-grid";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/masonry-image-grid
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { MasonryImageGrid } from "@/components/email/masonry-image-grid";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/purchase-pricing
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { PurchasePricing } from "@/components/email/purchase-pricing";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/subscription-pricing
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { SubscriptionPricing } from "@/components/email/subscription-pricing";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/collection-stats
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { CollectionStats } from "@/components/email/collection-stats";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/milestone-stats
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { MilestoneStats } from "@/components/email/milestone-stats";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/spotlight-stats
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { SpotlightStats } from "@/components/email/spotlight-stats";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/stacked-stats
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { StackedStats } from "@/components/email/stacked-stats";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/payment-timeline
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { PaymentTimeline } from "@/components/email/payment-timeline";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/timeline
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { Timeline } from "@/components/email/timeline";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/avatar-details
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { AvatarDetails } from "@/components/email/avatar-details";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/avatar-group
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { AvatarGroup } from "@/components/email/avatar-group";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/divider
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { Divider } from "@/components/email/divider";
```
```tsx
Command
Manual
```bash
npx shadcn@latest add @emailcn/react-email/spacer
```
**Install the following dependencies:**
```bash
npm install react-email tailwindcss
```
**Copy and paste the following code into your project.**
**Update the import paths to match your project setup.**
## Usage [#usage]
```tsx
import { Spacer } from "@/components/email/spacer";
```
```tsx