Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dashboard blocks

Pro

Recent Invoices Dashboard Block for React Aria

Eight invoices as ruled rows with a status word and a radio to pick, a reminder schedule for the picked overdue invoice with a late fee field, and a CSV export.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Chase what you are owed, with this invoice list and dunning schedule for React with React Aria. A hairline frame with a plus mark on each corner holds eight invoices as ruled rows, each with a radio, the invoice number in mono, the client, the amount, a status word (Paid, Pending, Overdue or Draft, worked out from the due day and the date of the page) and the due day. Picking an overdue invoice opens its reminder schedule as Steps: a day 1 email, a day 7 email, a day 14 call and a day 30 final notice, each dated from the due day and marked "Due since" or "Scheduled for". A Number Input sets a late fee in percent that adds to the total due, rounded to the cent, and the foot's Shine Button marks the next reminder as noted. An outline button in the header saves the eight rows as a CSV file. Below the medium breakpoint each invoice is two lines. It's built from Steps, Number Input, Button, Shine Button and Guides. For invoicing in small firms and any app that chases late payments.

FAQ

How do I load my own invoices?

Edit INVOICES: each has a number, a client and what it bills for, an amount in cents, an ISO due day and a state of draft, paid or sent. The status word is worked out from the due day against the fixed date AS_OF, so replace that with today's date when you wire it up. The reminder days live in REMINDERS.

How is the late fee calculated?

The fee is the invoice amount times the percentage, rounded once to the nearest cent, using whole cents so there is no floating point drift. The field takes whole percents from 0 to 10 and settles to that range when you leave it. The total due is the invoice plus the fee.

What does Send next reminder do?

It marks the next step in the schedule as noted in this page and says so in the status line, for example "Noted Day 14 call for DB-2046 in this demo. Nothing was sent." Once all four are noted it says so, and an invoice that is not overdue has no schedule. Nothing is emailed or called.

What does Export CSV save?

A real file made in the browser: one line per invoice with the number, client, amount, status, due day and how many reminders are noted. Clients are quoted so commas inside them do not break the columns. Nothing is uploaded.

What stays local, and how do I wire it for real?

The invoices, the noted reminders and the fee are in component state. To wire it up, load invoices from your ledger, send each reminder from a server action that records who sent it and when, and store the fee rate in your account settings.

Can I use it with a keyboard?

Yes. The rows are a native radio group, so the arrow keys move the pick; the late fee is a number field that React Aria commits when you leave it or press Enter, and every button is reachable in order.

All 200 dashboard blocks