Does this block actually send the receipt email?

No. It only renders a preview of what the email looks like. Sending the real email is a separate integration with a provider like Resend, Postmark, or SendGrid, typically using react-email to generate the actual HTML.

How do I show a multi-item receipt?

Pass multiple entries in the items array. Each one needs a description and an already-formatted amount string.

What happens if there's no discount or tax?

Leave discount and tax unset. The component skips those rows entirely instead of rendering them at zero.

Can I swap in my own logo?

Replace the Receipt icon in the header with your own logo image or SVG, and update companyName to match your brand.

Is the amount formatting handled automatically?

No, every amount is a plain string prop. Format currency, symbol, and locale yourself before passing it in.

Can I use this for refunds instead of charges?

Yes, swap the Paid badge and total to reflect a refund, and use negative-looking amounts in the line items if that fits your billing copy.

Billing Receipt Email Preview

A receipt preview styled like an automated billing email, with a company header, a Paid badge, a list of line items, and a subtotal/discount/tax/total breakdown. Meant for a dashboard preview of what a customer's receipt email looks like, not for sending the actual email.

By Staaarter Team

Billing

Updated June 1, 2026

Docs

Live preview

Docs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its badge dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/billing-receipt-email-preview.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/billing/billing109.tsx instead.

Usage

The file also exports billing109Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Billing109, billing109Demo } from "@/components/blocks/billing/billing109";

export default function Page() {
  return <Billing109 {...billing109Demo} />;
}

Props

Prop	Type	Default	Description
companyName	string	"Staaarter"	Name shown next to the receipt icon in the header.
receiptNumber	string	none	Receipt identifier shown under the header.
date	string	none	Date the receipt was sent, already formatted.
customerEmail	string	none	Recipient email shown in the 'Sent to' line.
items	ReceiptLineItem[]	none	Line items rendered in the order given.
subtotal	string	none	Subtotal amount, already formatted as currency.
discount	string	none	Optional discount line, omitted when not passed.
tax	string	none	Optional tax line, omitted when not passed.
total	string	none	Total amount, shown in bold at the bottom of the breakdown.
paymentMethodLabel	string	none	Optional footer text describing what was charged, e.g. "Visa ending in 4242".
className	string	none	Extra classes for the outer container.

Types

interface ReceiptLineItem {
  description: string;
  amount: string;
}

Behavior notes

Every amount (subtotal, discount, tax, total, and each line item) is a plain string, so currency formatting and symbol placement are entirely up to the caller.
The discount and tax rows only render when their prop is passed, so a receipt with no discount or no tax simply omits that row instead of showing a zero.
The payment method footer only renders when paymentMethodLabel is passed; otherwise the card ends after the totals.
This is a static preview component with no state; it does not send an email or fetch receipt data itself.

Frequently asked questions

More Billing Blocks

View all →

Billing Invoice List

Invoice history table with status badges, formatted amounts, and a per-row download link, built with shadcn/ui and Tailwind CSS.

Billing Failed Payment Alert

High-contrast failed-payment alert with a message, a retry button, and an optional update-payment-method button, built with shadcn/ui and Tailwind CSS.

Billing Credit Balance

Compact credit balance card with a large total, an optional purchased-versus-promotional breakdown, a low-balance notice, and a top-up button.

Billing Payment Methods

A saved payment method list for React and Next.js with brand icons, a default badge, near-expiry warnings, and remove/set-default actions per row.

Billing Add Card

A card entry form for React and Next.js with auto-formatted fields, internal brand detection, and per-field validation feedback built with shadcn/ui and Tailwind CSS.

Billing Coupon Code

An inline promo code input for React and Next.js with a simulated loading state, an applied summary showing the discount amount, and an invalid-code message.