A slide-over sheet that shows a full invoice with line items, tax and discount breakdown, payment method, billing address, and print/download actions.
"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>
);
}
Part of HextaUI — browse the full library on 21st.dev.