shadcn.io is not affiliated with official shadcn/ui
No Transactions Empty State Block for React
An accounts app's empty ledger as a running balance: a real table whose first dashed place says which sample comes next, a balance worked out in whole cents, and a drawing of two accounts joined by an in arrow and an out arrow that turn solid as money moves.
Installation
Overview
Show what a ledger will look like before it has an entry, with this no transactions empty state for React with Base UI. A hairline frame with a plus mark on each corner holds the transactions page of Brasswell, an accounts app, as bands. The first band is the account: its balance, what came in and what went out, and at its end a greyscale drawing of two accounts, Outside and Checking, joined by two arrows, one that carries money in and one that carries it out, both only dashed because nothing has moved. Under it a ledger as a native table (the description, the date, the category, the amount with its sign and its words, and the balance after it) with five places: the first is a dashed box that says which sample comes next, the rest are bars that fade down. The Shine Button, the only colored control, records the next of five typed samples: a row lands in the ledger, the balance moves and the arrow it used turns solid. The bands are ruled by Guides, and everything moves with CSS only. For the first screen of any bank, accounting or wallet app.
FAQ
What stays in the page, and how do I make it real?
Everything. The five samples are typed in the file, the balance is worked out from the ones recorded, and nothing is connected, saved or synced: a reload empties the ledger, and the status line says each sample was recorded in this demo. To wire it for real, list the transactions your API returns, take the running balance from it (or recompute it the same way, in whole cents), and draw the arrows solid for the directions that have moved.
How are the balance and the signs worked out?
In whole cents. Money in adds its cents and money out takes them away, the balance after each row is the sum of everything up to it, and "In" and "Out" in the band are the totals of each direction, so the figures always agree. Each amount carries both a sign and words (+$120.00 and Money in, -$45.00 and Money out), so it never depends on color, and every figure is written by one number formatter in a left-to-right span, so the digits stay Western digits in a right-to-left page.
Is it a real table, and what happens on a phone?
Yes, a native table with a caption, column headers and a row header for each description. Below the medium breakpoint the date and the category columns go and the date moves under the description; below the small breakpoint the balance column goes too and the balance after the row moves into that same line. The five places drawn under the table are a separate block hidden from assistive technology, so the table only ever holds real rows.
Does the panel change height as rows arrive?
No. Every row, recorded or drawn, is the same height, and the drawn places make way for the real rows one by one, so the panel is as tall with none as with five. After the fifth the button stays in place but quiet, and Start over empties the ledger and puts focus back on Record a sample transaction.
How does the drawing react?
It is one inline SVG that never swaps: each arrow is drawn dashed, and a solid copy of it fades in over it with an opacity transition that is switched off under reduced motion, the first time money has moved that way. The words (Outside, Checking, In 2, Out 1) are real text laid over it. The drawing is decorative and hidden from screen readers; the counts, the balance and the table say the same things.
Is it usable with a keyboard and a screen reader?
Tab runs through Record a sample transaction and Start over. One polite status message says every change in a sentence ("Money out $45.00, Domain renewal, recorded in this demo. Balance $75.00."), the table is named by its caption, and nothing moves focus except Start over, which returns it to the primary button.
Related
- Pro
An expense tracker's empty month as a log: an amount and a category, a budget bar worked out in whole cents, and a drawn receipt tape with a torn edge that gets a row for each expense and holds five.
- Pro
A full-height first-invoice screen for an invoicing app: a client field, three line items with the totals worked out in whole cents as you type, and a drawn invoice paper that fills line by line before one Create invoice button lists the draft.
- Pro
Invoice History Billing
Payment and invoicesAn account's invoices: a table filtered by status (paid, due, failed) with amounts, dates and PDF links, and a retry on the failed payment. On a phone each invoice is a card.
- Pro
A checkout settings tool's empty payment methods shown as an add dialog open over a drawn settings page: three type cards (Card, Bank account, Wallet) beside a drawn object that swaps, the services each works with, a nickname, and no number fields.
- Pro
Sortable Members Table
Sort and searchA members table whose column heads are buttons: press one to sort, again to reverse, a third time for the original order, with aria-sort on the active head, ties settled by name and a spoken line for each result.
- Pro
Connect Tools Empty State
Apps and integrationsA full-height first-run screen for an integration hub: six tool cards with checkboxes at the end, and at the start a drawn hub whose spokes turn from dashed to solid, and whose sockets take a lettermark, as each tool is ticked.