Collections
Prov1.0.0Receivables by age with reminders, mark-paid and bulk chasing.
Build for your project
Code/install build
Usage
Import it and pass your content. The props that matter most are listed next.
Example
import { Collections, type Invoice } from "@/components/ui/notchset/blocks/collections";
export function Receivables({ invoices }: { invoices: Invoice[] }) {
return (
<Collections
invoices={invoices}
monthlyRevenue={410_000}
onRemind={async (list: Invoice[]) => {
await fetch("/api/reminders", { method: "POST", body: JSON.stringify(list.map((i) => i.id)) });
}}
onMarkPaid={(invoice: Invoice) => fetch(`/api/invoices/${invoice.id}/paid`, { method: "POST" })}
/>
);
}Props
invoices–{ id, customer, number, terms?, amount, daysOverdue, lastTouch }[]daysOverdue of zero or less is not yet due (−3: due in 3 days).
monthlyRevenue / collectedToday–numberFor days sales outstanding, and the starting COLLECTED TODAY.
onRemind / onMarkPaid–(invoices) => Promise<void> / (invoice) => voidSend reminders (one or many) and record a payment.
Anatomy
- Only overdue invoices can be selected and reminded.
- Over 60 days overdue reads in signal; so does NO CONTACT YET on an overdue invoice.
- A paid invoice leaves every total and bucket at once.
Collectionsdata-slot="collections"KPIs, the aging bar, the bulk bar and the invoice list.
Source
components/ui/notchset/blocks/collections.tsx
This component is included with Pro.
Try the live preview above. Get Pro to install the source.
Build for your project
Code/install build
Installation
pnpm dlx shadcn@latest add @beautiful-ui-pro/collectionsNeeds your registry key. Your components.json style picks the Base UI or Radix build: radix-*, new-york and default get Radix, base-* gets Base UI.
Styles didn't apply?
The CLI adds the styles to the CSS file named in components.json (tailwind.css). Check that it points at your global stylesheet, that the project uses Tailwind CSS v4, and that the file is imported in your root layout. Installed by hand: paste styles.css into that file.
For coding agents
Give your coding assistant the Markdown guide instead of screenshots.
Use it for
- A finance team's daily collections worklist
- Prioritising overdue invoices by age and amount
Use something else when
- Issuing invoices: use Invoice Studio
- A full ledger: use a data table
Mistakes to avoid
- Send reminders from the server with a pay link; the block only asks
- Keep daysOverdue current; the buckets and sort come from it
Agents find it by
- collections, accounts receivable, AR aging, overdue invoices, dunning, payment reminders, finance ops, Notchset
Where agents read it
- Guide for this component: https://beautiful-ui.dev/md/collections.md
- Every component, for tools without MCP: /llms.txt
- MCP server:
https://beautiful-ui.dev/api/mcp(setup)
Behaviour
Keyboard
- Tab then Space
- Select an invoice or all overdue ones shown
- Enter
- Remind, mark paid, filter by a bucket
Accessibility
- Aging buckets are radios named with their amount and count; select-all is a tri-state checkbox
- REMIND and MARK PAID are named with the customer and invoice
- Every action is confirmed in a polite live region
Motion
- Totals
- Every number rolls; buckets glide to their new share (620ms)
- Remind
- A scanner, then SENT ✓
- Mark paid
- ✓ PAID, then the row folds away after 900ms
- Selection
- The ink bulk bar unrolls (380ms)
Responsive
- Under 760px (container width) the list keeps 740px and scrolls sideways; the KPIs go two by two under 640px.
Performance
- Plain rows and CSS transitions; nothing runs while idle.
Changelog
v1.0.0 · 2026-10-04
First release
Part of
Included with Pro
Pro is in early access.
