A collection of beautifully designed, accessible, and customizable email components for React Email, MJML React, and JSX 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.

Table

Order Summary Table rendered with email-safe, renderer-native components.

React Email MJML React JSX Email

import { OrderSummaryTable } from "@/components/email/order-summary-table";
import { defaultTheme } from "@/components/email/theme-default";

export function OrderSummaryTableDemo() {
  return (
    <OrderSummaryTable
      appearance="bordered"
      totalPosition="bottom"
      theme={{ ...defaultTheme, containerWidth: "640px" }}
    />
  );
}

Installation


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

Usage

import { OrderSummaryTable } from "@/components/email/order-summary-table";

<OrderSummaryTable appearance="bordered" totalPosition="bottom" />

Examples

Bordered order summary with total at the bottom

left

import { OrderSummaryTable } from "@/components/email/order-summary-table";

export function OrderSummaryTableAppearanceBorderedTotalPositionBottomExampleDemo() {
  return <OrderSummaryTable appearance="bordered" totalPosition="bottom" />;
}

centered

import { OrderSummaryTable } from "@/components/email/order-summary-table";

export function OrderSummaryTableAppearanceBorderedTotalPositionBottomAlignmentCenterExampleDemo() {
  return (
    <OrderSummaryTable
      appearance="bordered"
      totalPosition="bottom"
      alignment="center"
    />
  );
}

right

import { OrderSummaryTable } from "@/components/email/order-summary-table";

export function OrderSummaryTableAppearanceBorderedTotalPositionBottomAlignmentRightExampleDemo() {
  return (
    <OrderSummaryTable
      appearance="bordered"
      totalPosition="bottom"
      alignment="right"
    />
  );
}

justified

import { OrderSummaryTable } from "@/components/email/order-summary-table";

export function OrderSummaryTableAppearanceBorderedTotalPositionBottomAlignmentJustifiedExampleDemo() {
  return (
    <OrderSummaryTable
      appearance="bordered"
      totalPosition="bottom"
      alignment="justified"
    />
  );
}

Bordered order summary with total at the top

left

import { OrderSummaryTable } from "@/components/email/order-summary-table";

export function OrderSummaryTableAppearanceBorderedTotalPositionTopAlignmentLeftExampleDemo() {
  return (
    <OrderSummaryTable
      appearance="bordered"
      totalPosition="top"
      alignment="left"
    />
  );
}

centered

import { OrderSummaryTable } from "@/components/email/order-summary-table";

export function OrderSummaryTableAppearanceBorderedTotalPositionTopAlignmentCenterExampleDemo() {
  return (
    <OrderSummaryTable
      appearance="bordered"
      totalPosition="top"
      alignment="center"
    />
  );
}

right

import { OrderSummaryTable } from "@/components/email/order-summary-table";

export function OrderSummaryTableAppearanceBorderedTotalPositionTopAlignmentRightExampleDemo() {
  return (
    <OrderSummaryTable
      appearance="bordered"
      totalPosition="top"
      alignment="right"
    />
  );
}

justified

import { OrderSummaryTable } from "@/components/email/order-summary-table";

export function OrderSummaryTableAppearanceBorderedTotalPositionTopAlignmentJustifiedExampleDemo() {
  return (
    <OrderSummaryTable
      appearance="bordered"
      totalPosition="top"
      alignment="justified"
    />
  );
}

Bordered order summary with card details

bottom left

import { OrderSummaryTable } from "@/components/email/order-summary-table";

export function OrderSummaryTableAppearanceBorderedTotalPositionBottomCardDetailsAlignmentLeftExampleDemo() {
  return (
    <OrderSummaryTable
      appearance="bordered"
      totalPosition="bottom"
      cardDetails
      alignment="left"
    />
  );
}

bottom centered

import { OrderSummaryTable } from "@/components/email/order-summary-table";

export function OrderSummaryTableAppearanceBorderedTotalPositionBottomCardDetailsAlignmentCenterExampleDemo() {
  return (
    <OrderSummaryTable
      appearance="bordered"
      totalPosition="bottom"
      cardDetails
      alignment="center"
    />
  );
}

bottom right

import { OrderSummaryTable } from "@/components/email/order-summary-table";

export function OrderSummaryTableAppearanceBorderedTotalPositionBottomCardDetailsAlignmentRightExampleDemo() {
  return (
    <OrderSummaryTable
      appearance="bordered"
      totalPosition="bottom"
      cardDetails
      alignment="right"
    />
  );
}

bottom justified

import { OrderSummaryTable } from "@/components/email/order-summary-table";

export function OrderSummaryTableAppearanceBorderedTotalPositionBottomCardDetailsAlignmentJustifiedExampleDemo() {
  return (
    <OrderSummaryTable
      appearance="bordered"
      totalPosition="bottom"
      cardDetails
      alignment="justified"
    />
  );
}

top left

import { OrderSummaryTable } from "@/components/email/order-summary-table";

export function OrderSummaryTableAppearanceBorderedTotalPositionTopCardDetailsAlignmentLeftExampleDemo() {
  return (
    <OrderSummaryTable
      appearance="bordered"
      totalPosition="top"
      cardDetails
      alignment="left"
    />
  );
}

top centered

import { OrderSummaryTable } from "@/components/email/order-summary-table";

export function OrderSummaryTableAppearanceBorderedTotalPositionTopCardDetailsAlignmentCenterExampleDemo() {
  return (
    <OrderSummaryTable
      appearance="bordered"
      totalPosition="top"
      cardDetails
      alignment="center"
    />
  );
}

top right

import { OrderSummaryTable } from "@/components/email/order-summary-table";

export function OrderSummaryTableAppearanceBorderedTotalPositionTopCardDetailsAlignmentRightExampleDemo() {
  return (
    <OrderSummaryTable
      appearance="bordered"
      totalPosition="top"
      cardDetails
      alignment="right"
    />
  );
}

top justified

import { OrderSummaryTable } from "@/components/email/order-summary-table";

export function OrderSummaryTableAppearanceBorderedTotalPositionTopCardDetailsAlignmentJustifiedExampleDemo() {
  return (
    <OrderSummaryTable
      appearance="bordered"
      totalPosition="top"
      cardDetails
      alignment="justified"
    />
  );
}

Boxed order summary with total at the bottom

left aligned

import { OrderSummaryTable } from "@/components/email/order-summary-table";

export function OrderSummaryTableAppearanceBoxedTotalPositionBottomAlignmentLeftExampleDemo() {
  return (
    <OrderSummaryTable
      appearance="boxed"
      totalPosition="bottom"
      alignment="left"
    />
  );
}

left filled

import { OrderSummaryTable } from "@/components/email/order-summary-table";

export function OrderSummaryTableAppearanceBoxedTotalPositionBottomAlignmentLeftFilledExampleDemo() {
  return (
    <OrderSummaryTable
      appearance="boxed"
      totalPosition="bottom"
      alignment="left"
      filled
    />
  );
}

centered

import { OrderSummaryTable } from "@/components/email/order-summary-table";

export function OrderSummaryTableAppearanceBoxedTotalPositionBottomAlignmentCenterExampleDemo() {
  return (
    <OrderSummaryTable
      appearance="boxed"
      totalPosition="bottom"
      alignment="center"
    />
  );
}

centered filled

import { OrderSummaryTable } from "@/components/email/order-summary-table";

export function OrderSummaryTableAppearanceBoxedTotalPositionBottomAlignmentCenterFilledExampleDemo() {
  return (
    <OrderSummaryTable
      appearance="boxed"
      totalPosition="bottom"
      alignment="center"
      filled
    />
  );
}

right aligned

import { OrderSummaryTable } from "@/components/email/order-summary-table";

export function OrderSummaryTableAppearanceBoxedTotalPositionBottomAlignmentRightExampleDemo() {
  return (
    <OrderSummaryTable
      appearance="boxed"
      totalPosition="bottom"
      alignment="right"
    />
  );
}

right filled

import { OrderSummaryTable } from "@/components/email/order-summary-table";

export function OrderSummaryTableAppearanceBoxedTotalPositionBottomAlignmentRightFilledExampleDemo() {
  return (
    <OrderSummaryTable
      appearance="boxed"
      totalPosition="bottom"
      alignment="right"
      filled
    />
  );
}

justified

import { OrderSummaryTable } from "@/components/email/order-summary-table";

export function OrderSummaryTableAppearanceBoxedTotalPositionBottomAlignmentJustifiedExampleDemo() {
  return (
    <OrderSummaryTable
      appearance="boxed"
      totalPosition="bottom"
      alignment="justified"
    />
  );
}

justified filled

import { OrderSummaryTable } from "@/components/email/order-summary-table";

export function OrderSummaryTableAppearanceBoxedTotalPositionBottomAlignmentJustifiedFilledExampleDemo() {
  return (
    <OrderSummaryTable
      appearance="boxed"
      totalPosition="bottom"
      alignment="justified"
      filled
    />
  );
}

Boxed order summary with total at the top

left aligned

import { OrderSummaryTable } from "@/components/email/order-summary-table";

export function OrderSummaryTableAppearanceBoxedTotalPositionTopAlignmentLeftExampleDemo() {
  return (
    <OrderSummaryTable
      appearance="boxed"
      totalPosition="top"
      alignment="left"
    />
  );
}

left filled

import { OrderSummaryTable } from "@/components/email/order-summary-table";

export function OrderSummaryTableAppearanceBoxedTotalPositionTopAlignmentLeftFilledExampleDemo() {
  return (
    <OrderSummaryTable
      appearance="boxed"
      totalPosition="top"
      alignment="left"
      filled
    />
  );
}

centered

import { OrderSummaryTable } from "@/components/email/order-summary-table";

export function OrderSummaryTableAppearanceBoxedTotalPositionTopAlignmentCenterExampleDemo() {
  return (
    <OrderSummaryTable
      appearance="boxed"
      totalPosition="top"
      alignment="center"
    />
  );
}

centered filled

import { OrderSummaryTable } from "@/components/email/order-summary-table";

export function OrderSummaryTableAppearanceBoxedTotalPositionTopAlignmentCenterFilledExampleDemo() {
  return (
    <OrderSummaryTable
      appearance="boxed"
      totalPosition="top"
      alignment="center"
      filled
    />
  );
}

right aligned

import { OrderSummaryTable } from "@/components/email/order-summary-table";

export function OrderSummaryTableAppearanceBoxedTotalPositionTopAlignmentRightExampleDemo() {
  return (
    <OrderSummaryTable
      appearance="boxed"
      totalPosition="top"
      alignment="right"
    />
  );
}

right filled

import { OrderSummaryTable } from "@/components/email/order-summary-table";

export function OrderSummaryTableAppearanceBoxedTotalPositionTopAlignmentRightFilledExampleDemo() {
  return (
    <OrderSummaryTable
      appearance="boxed"
      totalPosition="top"
      alignment="right"
      filled
    />
  );
}

justified

import { OrderSummaryTable } from "@/components/email/order-summary-table";

export function OrderSummaryTableAppearanceBoxedTotalPositionTopAlignmentJustifiedExampleDemo() {
  return (
    <OrderSummaryTable
      appearance="boxed"
      totalPosition="top"
      alignment="justified"
    />
  );
}

justified filled

import { OrderSummaryTable } from "@/components/email/order-summary-table";

export function OrderSummaryTableAppearanceBoxedTotalPositionTopAlignmentJustifiedFilledExampleDemo() {
  return (
    <OrderSummaryTable
      appearance="boxed"
      totalPosition="top"
      alignment="justified"
      filled
    />
  );
}

Boxed order summary with card details and total at the bottom

left aligned

import { OrderSummaryTable } from "@/components/email/order-summary-table";

export function OrderSummaryTableAppearanceBoxedTotalPositionBottomCardDetailsAlignmentLeftExampleDemo() {
  return (
    <OrderSummaryTable
      appearance="boxed"
      totalPosition="bottom"
      cardDetails
      alignment="left"
    />
  );
}

left filled

import { OrderSummaryTable } from "@/components/email/order-summary-table";

export function OrderSummaryTableAppearanceBoxedTotalPositionBottomCardDetailsAlignmentLeftFilledExampleDemo() {
  return (
    <OrderSummaryTable
      appearance="boxed"
      totalPosition="bottom"
      cardDetails
      alignment="left"
      filled
    />
  );
}

centered

import { OrderSummaryTable } from "@/components/email/order-summary-table";

export function OrderSummaryTableAppearanceBoxedTotalPositionBottomCardDetailsAlignmentCenterExampleDemo() {
  return (
    <OrderSummaryTable
      appearance="boxed"
      totalPosition="bottom"
      cardDetails
      alignment="center"
    />
  );
}

centered filled

import { OrderSummaryTable } from "@/components/email/order-summary-table";

export function OrderSummaryTableAppearanceBoxedTotalPositionBottomCardDetailsAlignmentCenterFilledExampleDemo() {
  return (
    <OrderSummaryTable
      appearance="boxed"
      totalPosition="bottom"
      cardDetails
      alignment="center"
      filled
    />
  );
}

right aligned

import { OrderSummaryTable } from "@/components/email/order-summary-table";

export function OrderSummaryTableAppearanceBoxedTotalPositionBottomCardDetailsAlignmentRightExampleDemo() {
  return (
    <OrderSummaryTable
      appearance="boxed"
      totalPosition="bottom"
      cardDetails
      alignment="right"
    />
  );
}

right filled

import { OrderSummaryTable } from "@/components/email/order-summary-table";

export function OrderSummaryTableAppearanceBoxedTotalPositionBottomCardDetailsAlignmentRightFilledExampleDemo() {
  return (
    <OrderSummaryTable
      appearance="boxed"
      totalPosition="bottom"
      cardDetails
      alignment="right"
      filled
    />
  );
}

justified

import { OrderSummaryTable } from "@/components/email/order-summary-table";

export function OrderSummaryTableAppearanceBoxedTotalPositionBottomCardDetailsAlignmentJustifiedExampleDemo() {
  return (
    <OrderSummaryTable
      appearance="boxed"
      totalPosition="bottom"
      cardDetails
      alignment="justified"
    />
  );
}

justified filled

import { OrderSummaryTable } from "@/components/email/order-summary-table";

export function OrderSummaryTableAppearanceBoxedTotalPositionBottomCardDetailsAlignmentJustifiedFilledExampleDemo() {
  return (
    <OrderSummaryTable
      appearance="boxed"
      totalPosition="bottom"
      cardDetails
      alignment="justified"
      filled
    />
  );
}

Boxed order summary with card details and total at the top

left aligned

import { OrderSummaryTable } from "@/components/email/order-summary-table";

export function OrderSummaryTableAppearanceBoxedTotalPositionTopCardDetailsAlignmentLeftExampleDemo() {
  return (
    <OrderSummaryTable
      appearance="boxed"
      totalPosition="top"
      cardDetails
      alignment="left"
    />
  );
}

left filled

import { OrderSummaryTable } from "@/components/email/order-summary-table";

export function OrderSummaryTableAppearanceBoxedTotalPositionTopCardDetailsAlignmentLeftFilledExampleDemo() {
  return (
    <OrderSummaryTable
      appearance="boxed"
      totalPosition="top"
      cardDetails
      alignment="left"
      filled
    />
  );
}

centered

import { OrderSummaryTable } from "@/components/email/order-summary-table";

export function OrderSummaryTableAppearanceBoxedTotalPositionTopCardDetailsAlignmentCenterExampleDemo() {
  return (
    <OrderSummaryTable
      appearance="boxed"
      totalPosition="top"
      cardDetails
      alignment="center"
    />
  );
}

centered filled

import { OrderSummaryTable } from "@/components/email/order-summary-table";

export function OrderSummaryTableAppearanceBoxedTotalPositionTopCardDetailsAlignmentCenterFilledExampleDemo() {
  return (
    <OrderSummaryTable
      appearance="boxed"
      totalPosition="top"
      cardDetails
      alignment="center"
      filled
    />
  );
}

right aligned

import { OrderSummaryTable } from "@/components/email/order-summary-table";

export function OrderSummaryTableAppearanceBoxedTotalPositionTopCardDetailsAlignmentRightExampleDemo() {
  return (
    <OrderSummaryTable
      appearance="boxed"
      totalPosition="top"
      cardDetails
      alignment="right"
    />
  );
}

right filled

import { OrderSummaryTable } from "@/components/email/order-summary-table";

export function OrderSummaryTableAppearanceBoxedTotalPositionTopCardDetailsAlignmentRightFilledExampleDemo() {
  return (
    <OrderSummaryTable
      appearance="boxed"
      totalPosition="top"
      cardDetails
      alignment="right"
      filled
    />
  );
}

justified

import { OrderSummaryTable } from "@/components/email/order-summary-table";

export function OrderSummaryTableAppearanceBoxedTotalPositionTopCardDetailsAlignmentJustifiedExampleDemo() {
  return (
    <OrderSummaryTable
      appearance="boxed"
      totalPosition="top"
      cardDetails
      alignment="justified"
    />
  );
}

justified filled

import { OrderSummaryTable } from "@/components/email/order-summary-table";

export function OrderSummaryTableAppearanceBoxedTotalPositionTopCardDetailsAlignmentJustifiedFilledExampleDemo() {
  return (
    <OrderSummaryTable
      appearance="boxed"
      totalPosition="top"
      cardDetails
      alignment="justified"
      filled
    />
  );
}

API Reference

Prop	Type	Default	Description
`theme`	`EmailTheme`	`defaultTheme`	Renderer theme configuration.
`alignment`	`"left" \| "center" \| "right" \| "justified"`	`"left"`	Aligns the order-summary values.
`appearance`	`"bordered" \| "boxed"`	`"bordered"`	Selects the bordered or boxed presentation.
`filled`	`boolean`	`false`	Uses the filled table treatment when supported.
`totalPosition`	`"top" \| "bottom"`	`"bottom"`	Places the order total above or below rows.
`cardDetails`	`boolean`	`false`	Shows the card-details treatment.

Order Summary Billing Details

On This Page

Installation Usage Examples Bordered order summary with total at the bottom left centered right justified Bordered order summary with total at the top left centered right justified Bordered order summary with card details bottom left bottom centered bottom right bottom justified top left top centered top right top justified Boxed order summary with total at the bottom left aligned left filled centered centered filled right aligned right filled justified justified filled Boxed order summary with total at the top left aligned left filled centered centered filled right aligned right filled justified justified filled Boxed order summary with card details and total at the bottom left aligned left filled centered centered filled right aligned right filled justified justified filled Boxed order summary with card details and total at the top left aligned left filled centered centered filled right aligned right filled justified justified filled API Reference

Edit this page Follow @shadcnlabs Join community