shadcn.io is not affiliated with official shadcn/ui
No Invoices Empty State Block for Svelte
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.
Installation
Overview
Turn a blank invoice list into the first invoice, with this no invoices empty state for Svelte with Ark UI. It's the invoices page of Nibpen, an invoicing app: the page's two side rails run its full height and one band crosses the screen between two rules with a plus mark where each meets a rail. At the start of the band sit the heading, a Field with an Input for who the invoice is for, three lines of what you sold, how many and the price of one, and the subtotal, the tax and the total, all worked out as you type. The Shine Button, the only colored control, creates the invoice, and under it a list that is one dashed row turns into INV-0001, a draft, with a button to download its PDF. At the end a greyscale drawing of the invoice paper stands where a product's mark would: every line you type lands on it, and what is still missing is a dashed box. It's the seller's side of the money, not a customer's billing history. The band is ruled by Guides, and everything moves with CSS only. For a first-run screen in any invoicing, freelance or accounting app.
FAQ
What stays in the page, and how do I make it real?
Nothing leaves the page. The invoice is a row kept in the page's state, the client and the lines are whatever you typed, the due date is the fixed demo day plus 14, and the status line says "as a draft in this demo. Nothing was sent." The one real file is the PDF: a small one-page file built in the browser when you press Download PDF. To wire it for real, send the client and the priced lines to your API where the code says so, list what it returns, and let your server render the PDF.
How are the totals worked out?
In whole cents, never in floating point: a price like 120.50 becomes 12050 cents, each line is its quantity times that, the subtotal is their sum, and the total adds the tax. Tax is a typed constant at 0%, so the example is easy to check by hand; change TAX_PERCENT and the rounding keeps the lines summing to the total. Every figure is written by one Intl.NumberFormat in a left-to-right span, so the digits stay Western in a right-to-left page, and a keyboard that types Arabic-Indic digits is read as ordinary digits.
Why does Create invoice look quiet at first, and what does it say?
A button that is simply disabled can't explain itself, so this one stays in the tab order and keeps its reason in the line above it: "Name who it is for.", then "Add a line: what and its price.", then which line needs a price or a quantity. Pressing it anyway, or Enter in a field, says the same thing in the status message and moves focus to the field that is missing. Once the form is complete the line turns into a count and the total, and the button turns on.
How does the paper react without moving anything?
It is built from boxes of a fixed height. A dashed box and the typed text share one place, and typing fades the dashed one out and shows the text, so nothing grows or shifts. The paper is a picture of the form, so it is hidden from assistive technology; the totals beside the form say every figure it shows. On a phone it sits below the form and drops its second line of detail, and the Create invoice button stays pinned to the bottom of the screen.
Does the page change height when the invoice is created?
No. The form stays where it is and is only locked until you press Start over, the list row is the same height dashed or filled, and the button keeps its place with a new label, so the page never jumps. Start over empties the client and the lines, shows the dashed row again and puts focus back on the client field.
Is it usable with a keyboard and a screen reader?
Tab runs through the client, the nine line fields, Create invoice, Start over and, once there is an invoice, Download PDF. Every line field is named by its line and its role ("Line 2, quantity"), the line under the button is tied to them, and one polite status message says what happened. After creating, focus moves to the new row's Download PDF button.