A collection of beautifully designed, accessible, and customizable email components. Built on React Email. Works with shadcn/ui.

How do I use emailcn?

Use npx shadcn@latest add with our registry URL to install components and blocks. Themes, components, and blocks are all installable via the shadcn CLI.

Is emailcn open source?

Yes. The source is on GitHub and released under the MIT License.

Order Summary

Order summary layouts for purchase confirmation and receipt emails.

React Email MJML React

Variants

Bordered Order Summary with Total Top

Bordered Order Summary with Total Bottom

Bordered Order Summary with Card Details

Boxed Order Summary with Total Top

Boxed Order Summary with Total Bottom

Boxed Order Summary with Card Details and Total Top

Boxed Order Summary with Card Details and Total Bottom

Order Summary with Billing Details (Inline)

Order Summary with Billing Details (Top)

Installation


$ pnpm dlx shadcn@latest add @emailcn/order-summary

Usage

import { BorderedOrderSummaryWithTotalTop } from "@/components/emails/ecommerce/order-summary/bordered-order-summary-with-total-top";

<BorderedOrderSummaryWithTotalTop
  {...BorderedOrderSummaryWithTotalTop.PreviewProps}
/>

API Reference

Order Summary

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

Category Previews Product Detail

On This Page

Variants Bordered Order Summary with Total Top Bordered Order Summary with Total Bottom Bordered Order Summary with Card Details Boxed Order Summary with Total Top Boxed Order Summary with Total Bottom Boxed Order Summary with Card Details and Total Top Boxed Order Summary with Card Details and Total Bottom Order Summary with Billing Details (Inline)Order Summary with Billing Details (Top)Installation Usage API Reference Order Summary

Edit this page Follow @shadcnlabs Join community