Get started with Invoice Generator
This guide will walk you through creating your first professional invoice from scratch. No prior setup required.
Set up your company profile
Add your business information once, and it will auto-fill on every invoice you create.Navigate to the Company page and fill in your details:interface CompanyDetails {
name: string; // Your business name
email: string; // Contact email
phone?: string; // Phone number (optional)
address: string; // Street address
city: string; // City
state: string; // State/Province
zipCode: string; // Zip/Postal code
country: string; // Country
website?: string; // Website URL (optional)
taxId?: string; // Tax ID/VAT number (optional)
logo?: string; // Company logo (optional)
}
Your company logo will appear on all generated PDF invoices. Supported formats: PNG, JPG, SVG.
Add a customer
Create a customer record to save time on future invoices.Go to the Customers page and add a new customer:interface Customer {
id: string;
name: string; // Customer/company name
email: string; // Email address
address: string; // Street address
city: string; // City
state: string; // State/Province
zipCode: string; // Zip/Postal code
country: string; // Country
}
Create your first invoice
Navigate to Create Invoice and fill in the details:Invoice details
- Invoice number: Auto-generated (e.g.,
INV-284190123) or customize it
- Currency: Choose from 11 supported currencies
- Invoice date: Defaults to today
- Due date: Defaults to 30 days from today
Select an existing customer or enter details manually:<Select
value={selectedCustomerId}
onValueChange={handleCustomerSelect}
>
<SelectTrigger>
<SelectValue placeholder="Choose an existing customer" />
</SelectTrigger>
<SelectContent>
{customers.map((customer) => (
<SelectItem key={customer.id} value={customer.id}>
{customer.name} ({customer.email})
</SelectItem>
))}
</SelectContent>
</Select>
Line items
Add products or services with quantity and rate:interface InvoiceItem {
id: string;
description: string; // e.g., "Web design — 3 hrs"
quantity: number; // e.g., 3
rate: number; // e.g., 300
discount?: number; // Optional discount percentage
taxRate?: number; // Optional item-level tax rate
}
// From app/lib/invoice.ts
export function calculateInvoiceSummary(
items: InvoiceItem[],
globalTaxRate: number = 0,
): InvoiceSummary {
let subtotal = 0;
let itemDiscount = 0;
let taxAmount = 0;
for (const item of items) {
const qty = isNaN(item.quantity) ? 0 : item.quantity || 0;
const rate = isNaN(item.rate) ? 0 : item.rate || 0;
const itemTotal = qty * rate;
const discount = item.discount ? (itemTotal * item.discount) / 100 : 0;
const itemTaxBase = itemTotal - discount;
subtotal += itemTotal;
itemDiscount += discount;
const taxRate = item.taxRate ?? globalTaxRate;
taxAmount += (itemTaxBase * taxRate) / 100;
}
const subtotalAfterDiscount = subtotal - itemDiscount;
const total = subtotalAfterDiscount + taxAmount;
return {
subtotal,
itemDiscount,
subtotalAfterDiscount,
taxAmount,
total,
};
}
Add tax and notes
Tax configuration
Set a global tax rate (e.g., 20% for UK VAT):<Input
label="Tax Rate (%)"
name="taxRate"
type="number"
value={formData.taxRate}
onChange={handleInputChange}
min="0"
max="100"
step="0.01"
/>
Notes
Add payment terms, banking details, or any additional information:<Textarea
name="notes"
placeholder="Add any additional notes or terms..."
value={formData.notes}
onChange={handleInputChange}
rows={4}
/>
Common notes include payment terms (“Net 30”), accepted payment methods, or banking details.
Save and send
Create the invoice
Click Create Invoice to save it as a draft:const invoice: Invoice = {
id: String(Date.now()),
invoiceNumber: formData.invoiceNumber,
date: formData.date,
dueDate: formData.dueDate,
status: "draft",
customer: {
id: customerId,
name: formData.customerName,
email: formData.customerEmail,
address: formData.customerAddress,
city: formData.customerCity,
state: formData.customerState,
zipCode: formData.customerZipCode,
country: formData.customerCountry,
},
items,
notes: formData.notes,
taxRate: Number(formData.taxRate),
currency: formData.currency,
createdAt: new Date().toISOString(),
updatedAt: new Date().toISOString(),
};
await createInvoice(invoice);
Export or send
From the invoice detail page, you can:
- Download PDF: Generate a professionally formatted PDF
- Send via email: Email the invoice directly to your customer
- Mark as sent/paid: Update the invoice status
- Edit: Make changes if needed
Invoice status automatically updates to show overdue invoices based on the due date.
Next steps
Save as template
Create reusable templates for recurring invoices
PDF customization
Customize the appearance of your PDF invoices
Email setup
Configure email delivery settings
API integration
Integrate with your existing systems
Example invoice
Here’s what a complete invoice looks like:
{
"id": "1709478123456",
"invoiceNumber": "INV-478123",
"date": "2026-03-03",
"dueDate": "2026-04-02",
"status": "sent",
"customer": {
"id": "1709471000000",
"name": "Bright Digital Ltd",
"email": "[email protected]",
"address": "123 Tech Street",
"city": "London",
"state": "Greater London",
"zipCode": "SW1A 1AA",
"country": "United Kingdom"
},
"items": [
{
"id": "1",
"description": "Web design — 3 hrs",
"quantity": 3,
"rate": 300
},
{
"id": "2",
"description": "Development — 8 hrs",
"quantity": 8,
"rate": 400
},
{
"id": "3",
"description": "Hosting setup — 1×",
"quantity": 1,
"rate": 100
}
],
"notes": "Payment due within 30 days. Thank you for your business!",
"taxRate": 20,
"currency": "GBP",
"createdAt": "2026-03-03T10:15:23.456Z",
"updatedAt": "2026-03-03T10:15:23.456Z"
}
The invoice above would have a subtotal of £4,000.00, tax of £800.00 (20%), and a total of £4,800.00.