Billing Order Confirmation

Installation

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

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

Usage

The file also exports billing81Demo, 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 { Billing81, billing81Demo } from "@/components/blocks/billing/billing81";

export default function Page() {
  return <Billing81 {...billing81Demo} />;
}

Props

Types

interface OrderLineItem {
  label: string;
  amount: string;
}

Behavior notes

• status is the only thing that switches the icon, its color, and the default heading text (via an internal lookup keyed by "confirmed" or "pending"), so callers never pass an icon directly.
• lineItems is optional; when omitted the summary panel just shows the order ID, date, payment method, and total with no itemized breakdown.
• Both action buttons render as next/link elements through the Button component's render prop, so receiptHref and dashboardHref must be real routes rather than onClick handlers.
• The receipt button only appears when receiptHref is passed, letting you drop it entirely for flows that email the receipt instead of linking to one.
• There's no client-side state or animation; the component renders once from its props and stays static.

Frequently asked questions