2 variants

Invoice

Invoices for a SaaS app. A document that prints clean, and a list you filter by status and open in place.

Detail

The invoice as a document. Status, dates, both addresses, line items and totals, with pay and print. Stacks on a phone.

Pay $359.64

Invoice

Due

INV-0148

Northwind Labs

Issued: Sep 20, 2026
Due: Oct 4, 2026
Amount due: $359.64

From

Northwind Labs

120 Market Street

San Francisco, CA 94105

billing@northwind.dev

Billed to

Acme Studio

44 Harbor Road

Portland, OR 97209

ops@acme.studio

Description

Qty

Rate

Amount

Team plan seats

Oct 1 to Oct 31

$24.00

$288.00

Extra API calls

50,000 calls

$9.00

$45.00

Team plan seats
Oct 1 to Oct 31 · 12 × $24.00
$288.00
Extra API calls
50,000 calls · 5 × $9.00
$45.00

Subtotal: $333.00
Tax (8%): $26.64
Total: $359.64

page.tsx

import { InvoiceDetail } from "@/components/blocks/invoice-detail";

export default async function Page() {
  const invoice = await getInvoice();
  return <InvoiceDetail invoice={invoice} payHref={invoice.checkoutUrl} />;
}

"use client";

import { Download, Printer } from "lucide-react";
import type { ReactNode } from "react";
import { SECONDARY_BUTTON } from "@/components/registry/form-kit";
import { cn } from "@/lib/utils";

export interface InvoiceLineItem {
  description: string;
  /** A second line, such as the billing period. */
  detail?: string;
  quantity: number;

235 more lines ship with an easeUI Pro license.

Buy a license

Install

$ bunx --bun shadcn add @easeui-pro/invoice-detail

List

Every invoice with a gooey status filter and the amount outstanding. A row opens in place to its lines, pay and download.

Invoices

$618.84 outstanding

Due Oct 4, 2026
Description Qty Rate Amount
Team plan seats
Oct 1 to Oct 31
12 $24.00 $288.00
Extra API calls
50,000 calls
5 $9.00 $45.00
Team plan seats
Oct 1 to Oct 31 · 12 × $24.00
$288.00
Extra API calls
50,000 calls · 5 × $9.00
$45.00
Subtotal
$333.00
Tax (8%)
$26.64
Total
$359.64
Download Pay $359.64
Due Sep 3, 2026
Description Qty Rate Amount
Team plan seats
Sep 1 to Sep 30
10 $24.00 $240.00
Team plan seats
Sep 1 to Sep 30 · 10 × $24.00
$240.00
Subtotal
$240.00
Tax (8%)
$19.20
Total
$259.20
Pay $259.20
Due Aug 3, 2026 · Paid with Visa ending 4242
Description Qty Rate Amount
Team plan seats
Aug 1 to Aug 31
10 $24.00 $240.00
Onboarding workshop
1 $450.00 $450.00
Team plan seats
Aug 1 to Aug 31 · 10 × $24.00
$240.00
Onboarding workshop
1 × $450.00
$450.00
Subtotal
$690.00
Discount
−$50.00
Tax (8%)
$51.20
Total
$691.20
Download
Due Jul 4, 2026 · Paid with Visa ending 4242
Description Qty Rate Amount
Team plan seats
Jul 1 to Jul 31
8 $24.00 $192.00
Team plan seats
Jul 1 to Jul 31 · 8 × $24.00
$192.00
Subtotal
$192.00
Tax (8%)
$15.36
Total
$207.36
Download

No all invoices.

page.tsx

import { InvoiceList } from "@/components/blocks/invoice-list";

export default async function Page() {
  const invoices = await getInvoices();
  return <InvoiceList invoices={invoices} />;
}

"use client";

import { ChevronDown, Download } from "lucide-react";
import { useId, useState } from "react";
import {
  formatInvoiceDate,
  formatMoney,
  type InvoiceData,
  InvoiceLines,
  type InvoiceStatus,
  InvoiceStatusBadge,
  invoiceTotals,

128 more lines ship with an easeUI Pro license.

Buy a license

Install

$ bunx --bun shadcn add @easeui-pro/invoice-list