Invoice Preview

Component

About

Printable invoice with amount due up front, from/billed-to columns, line items, discount and VAT. Status uses a quiet dot, send action has loading and sent states.

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

Code

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

Usage.tsx

import { InvoicePreview } from "@/components/ui/invoice-preview"
export default function InvoicePreviewDemo() {
  return (
    <div className="min-h-screen bg-background p-6 sm:p-10">
      <InvoicePreview number="INV-2026-0042" status="pending" issueDate="Oct 1, 2026" dueDate="Oct 15, 2026"
        from={{ name: "Acme Studio", email: "billing@acme.studio", address: ["221B Baker St", "London, UK"] }}
        to={{ name: "Globex Corp.", email: "ap@globex.com", address: ["500 Market St", "San Francisco, CA"] }}
        items={[{ description: "Landing page design", details: "Hero, features, pricing, FAQ", quantity: 1, unitPrice: 2400 },
          { description: "React implementation", details: "Next.js + Tailwind + shadcn/ui", quantity: 32, unitPrice: 85 },
          { description: "Hosting setup", quantity: 1, unitPrice: 150 }]}
        taxRate={20} discount={200} notes="Pay by bank transfer to IBAN GB29 NWBK 6016 1331 9268 19 within 14 days. Reference the invoice number." />
    </div>
  )
}