## Invoice Builder (S—211)

Editable invoice lines: add rows, edit quantity and rate inline, remove lines, and watch discount, tax and total update.

- URL: https://sundaeui.dev/components/invoice-builder
- Category: Forms & inputs · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/invoice-builder.json`
- Tags: totals, form, tax, line-items, billing, invoice

Each line has a description, quantity and rate; the amount computes as you type. Add line focuses the new description.
Tax rate and a discount sit below; totals update instantly and are formatted for the chosen currency.

### Usage

```tsx
import { InvoiceBuilder } from '@/components/sundae/invoice-builder'

<InvoiceBuilder />
```

### Props

- `defaultLines` (`{ desc: string; qty: number; rate: number }[]`): Starting lines.
- `currency` (`string`, default `'USD'`): ISO currency.
- `tax` (`number`, default `8`): Tax percent.
- `onChange` (`(lines, totals) => void`): Called on change.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Invoices, quotes, estimates, purchase orders.

### When not to use

- Read-only receipts: show a summary instead.

### Accessibility

- Inputs are labelled per line (“Line 2 quantity”).
- Totals are a live region; remove buttons name their line.
- Reduced motion removes the movement and keeps every state change.