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.
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>
)
}