Invoice line items React component for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Invoice line items is part of Pro, with 298 more Pro items: $8 a month or $150 once. 14-day refund before you download any Pro item. See plans

Usage

Import InvoiceLineItems from @/components/ui/invoice-line-items.

import { useState } from "react"
import {
  InvoiceLineItems,
  InvoiceTotals,
  type InvoiceDocumentDiscount,
  type InvoiceLine,
  type InvoiceProduct,
} from "@/components/ui/invoice-line-items"

const PRODUCTS: InvoiceProduct[] = [
  { id: "crm-business", name: "Northwind CRM Business license", unit: "month", unitPrice: 250, vatRate: 0.21, sku: "CRM-BUS" },
  { id: "onboarding", name: "Setup and training", unit: "hour", unitPrice: 320, vatRate: 0.21 },
  { id: "guide", name: "Printed user guide", unit: "pc", unitPrice: 64.9, vatRate: 0.11 },
]

export function InvoiceEditor() {
  const [lines, setLines] = useState<InvoiceLine[]>([
    { id: "l1", productId: "crm-business", product: "Northwind CRM Business license", quantity: 25, unit: "month", unitPrice: 250, vatRate: 0.21, discount: 10 },
  ])
  const [discount, setDiscount] = useState<InvoiceDocumentDiscount | null>(null)
  return (
    <InvoiceLineItems
      value={lines}
      onValueChange={(next, totals) => {
        setLines(next)
        console.log("Amount due", totals.total)
      }}
      products={PRODUCTS}
      units={["pc", "hour", "day", "month", "service"]}
      documentDiscount={discount}
      onDocumentDiscountChange={setDiscount}
      name="invoice[lines]"
      currency="RON"
      locale="en-US"
      labels={{ grandTotal: "Amount due" }}
    />
  )
}

// the totals block alone (an invoice preview): pass lines or precomputed totals.
// DEFAULT_INVOICE_LINE_ITEMS_LABELS holds the English strings to spread under a translation
export function InvoicePreviewTotals({ lines }: { lines: InvoiceLine[] }) {
  return <InvoiceTotals lines={lines} currency="RON" locale="en-US" />
}

Props

• value
  InvoiceLine[]

  The lines (controlled). InvoiceLine is the lib/invoicing line { id, quantity, unitPrice, vatRate?, discount?, discountType? } plus product, productId, description, unit and vatCategory (tells the 0% rows apart: E exempt, AE reverse charge, K intra-community).

• defaultValue
  InvoiceLine[]

  The starting lines while uncontrolled. Left out: one empty line (none when minLines is 0).

• onValueChange
  (lines: InvoiceLine[], totals: InvoiceTotalsData) => void

  Every edit, with the totals from computeInvoiceTotals (net, VAT per rate, total).

• productsdefault "[]"
  InvoiceProduct[]

  The product combobox's options: { id, name, description?, unit?, unitPrice, vatRate?, sku?, keywords? }. Name, SKU and keywords are searched; picking one fills the unit, price and VAT and keeps the quantity.

• onSearchProducts
  (query: string) => Promise<InvoiceProduct[]>

  Async catalog search (the combobox's async mode, debounced, older answers dropped).

• allowCustomProductsdefault true
  boolean

  Free text in the product cell with an “Add …” row. A new product keeps its price empty and flagged until one is entered.

• currencydefault "RON"
  string

  ISO 4217 code for prices and totals. Changing it never converts the amounts.

• pricesIncludeVatdefault false
  boolean

  The price column is the price with VAT (B2C quotes, shops); the totals end with “of which VAT”. Math per lib/invoicing either way.

• vatRatesdefault "RO_VAT_RATES"
  VatRateOption[]

  The VAT select's options: { value, rate, category, label, description }. Default: 21%, 11%, 0% exempt, 0% reverse charge, 0% intra-community. A line with a rate not in the list shows it as text.

• defaultVatRatedefault "0.21"
  number

  The VAT rate of new lines, as a fraction.

• unitsdefault "["pcs", "hr", "day", "month", "kg", "m²", "service"]"
  string[]

  The unit list; any other unit can be typed.

• showDescriptiondefault true
  boolean

  A second line under the product for a description.

• showUnitdefault true
  boolean

  The unit column.

• showVatdefault true
  boolean

  The VAT column.

• showDiscountdefault true
  boolean

  The discount column, with a % / amount switch per line.

• defaultDiscountTypedefault "percent"
  "percent" | "amount"

  The discount type of new lines.

• documentDiscountdefault "null"
  { type: "percent" | "amount"; value: number } | null

  A discount on the whole document, shared across the lines by value before VAT.

• onDocumentDiscountChange
  (discount: InvoiceDocumentDiscount | null) => void

  Makes the totals' discount row editable.

• showTotalsdefault true
  boolean

  The totals block under the lines.

• totalsPositiondefault "below"
  "below" | "end"

  below: a full-width block; end: a narrow block at the end under the table (always full width on phones).

• layoutdefault "auto"
  "auto" | "table" | "cards"

  auto: the spreadsheet table from 768px of the component's own width (not the screen's), cards with a sheet editor below it, so a narrow panel on a desktop gets the cards too. table and cards force one (the table scrolls inside its panel when it does not fit).

• reorderabledefault true
  boolean

  Drag handles (dnd-kit: mouse, a long press on touch, the keyboard), Alt + arrows and Move up / down in the menu.

• minLinesdefault 1
  number

  Lines that always stay: removing one of the last ones clears it instead. 0 shows an empty state when there are none.

• maxLinesdefault 0
  number

  The most lines; Add and Duplicate turn off at the limit. 0 means no limit.

• errors
  Record<string, Partial<Record<"product" | "quantity" | "unitPrice" | "vatRate" | "discount", string>>>

  Server validation per line id and field: the cell turns invalid with the message in a tooltip (desktop) or under the field (the sheet).

• readOnlydefault false
  boolean

  The invoice as the customer sees it: a plain table without inputs, the same totals.

• disableddefault false
  boolean

  Every cell, handle and button is disabled.

• sizedefault "md"
  "sm" | "md"

  Cell controls 32 / 40px (44px on touch).

• variantdefault "ghost"
  "ghost" | "soft"

  ghost: a spreadsheet feel with a hover tint; soft: filled fields.

• namedefault ""
  string

  A hidden input with the lines as JSON, for native forms.

• localedefault ""
  string

  Numbers and money format with this locale; empty uses the UIProvider's, then the page's.

• undoTimeoutdefault 5000
  number

  Milliseconds the undo row stays after a line is removed.

• labelsdefault "DEFAULT_INVOICE_LINE_ITEMS_LABELS"
  Partial<InvoiceLineItemsLabels>

  Every string: the order, index and actions headers, column names (product, description, quantity, unit, unitPrice, unitPriceWithVat, vat, discount, total), actions (addLine, duplicate, moveUp, moveDown, remove, undo), the add row's lineCount(count, formatted), the empty state (empty, emptyDescription), the cells (descriptionPlaceholder, untitled), the pickers (productPlaceholder, createProduct(query), noProducts, unitPlaceholder, createUnit(query), priceMissing, newProduct, discountType, percent, amount), totals (gross, lineDiscounts, documentDiscount, net, vatRow(rate, base), grandTotal, includedVat(rate), showBreakdown, hideBreakdown), the sheet (editLine, saveLine, cancel, lineTitle(n), lineTotal), accessible names (caption, cellLabel(column, n), lineActions(n), reorder(n)), announcements (removed(n, product), moved(from, to), added(n), totalAnnouncement(total)) and the drag messages (pickedUp, movedTo, dropped, dragCancelled).

• classNames
  Partial<Record<InvoiceLineItemsSlot, string>>

  Classes for panel, table, head, row, handle, index, product, description, quantity, unit, price, vat, discount, total, actions, add, cards, card, sheet, empty, live and totals (the panel around InvoiceTotals).

Parts

FAQ

Used in

More React form components