Billing Invoice Details

Dashboards 4

About

A slide-over sheet that shows a full invoice with line items, tax and discount breakdown, payment method, billing address, and print/download actions.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Billing Invoice Details to your project and fits it to your theme.

Code

How Billing Invoice Details is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import BillingInvoiceDetails from "@/components/ui/billing-invoice-details";

const invoice = {
  id: "inv_001",
  invoiceNumber: "INV-2026-0042",
  date: new Date("2026-07-01"),
  dueDate: new Date("2026-07-15"),
  amount: 129,
  currency: "USD",
  status: "paid" as const,
  description: "Pro plan — July 2026",
  lineItems: [
    {
      description: "Pro Plan (Monthly)",
      quantity: 1,
      unitPrice: 99,
      subtotal: 99,
    },
    {
      description: "Additional Seats",
      quantity: 3,
      unitPrice: 10,
      subtotal: 30,
    },
  ],
  subtotal: 129,
  tax: { amount: 12.9, rate: 0.1, label: "VAT" },
  discount: { amount: 10, code: "WELCOME10", label: "Welcome" },
  total: 131.9,
  paymentMethod: { type: "card", brand: "visa", last4: "4242" },
  billingAddress: {
    name: "Acme Inc.",
    line1: "123 Market Street",
    line2: "Suite 400",
    city: "San Francisco",
    state: "CA",
    zip: "94103",
    country: "United States",
  },
};

export default function Default() {
  const [open, setOpen] = useState(false);

  return (
    <div className="flex min-h-[300px] items-center justify-center">
      <Button onClick={() => setOpen(true)}>View invoice</Button>
      <BillingInvoiceDetails
        invoice={invoice}
        open={open}
        onOpenChange={setOpen}
        onDownload={() => {}}
        onPrint={() => {}}
      />
    </div>
  );
}