shadcn.io is not affiliated with official shadcn/ui
Invoice Download Command Menu Block for Solid
A usage-billing command menu shown open over an invoices page: six invoices with amount and Paid or Due, a Download button on each that saves a real text receipt, and an Actions group that says it is in this demo only.
Installation
Overview
Get an invoice out of billing without opening a page with this billing command menu for Solid with Ark UI. It opens from the invoices page in Usagelane, a usage billing service, whose header holds an outline field with its ⌘ K cap, and the page is drawn under a soft scrim inside a hairline frame with a plus mark on each corner. The menu is the catalog Command, narrow: the six latest invoices with their number, date, amount and a Paid or Due badge, and an Actions group with Update card, Add credits and Cancel plan. Each invoice's Download button, or Alt D on the highlighted row, saves a real text receipt made in the browser from the row's data, and Enter puts the invoice on the drawn page. The actions only say what they would do, and the dates are dropped on a phone. For preview the menu is drawn open in place when the page loads; the field, or Ctrl or ⌘ K while focus is in the block, opens the real command dialog with the same rows and query. For billing portals, account menus and any place where the next step is a receipt.
FAQ
Why is the menu already open, and what do I keep?
So you can see it without a click. On load the menu is the Command drawn inline over a picture of an invoices page, in a plain shell that is not modal, so nothing is trapped, hidden or focused and the page around the preview keeps working. The header's field opens the real command dialog, modal, with its focus trap, Escape and focus return, and the inline copy stays closed until a reload. Both show the same Palette and share the block's state, so a download or a search in the copy is in the dialog. In your app keep the dialog and drop the copy: the "in-place" state, the scrim with its shell and the Escape and blur effects.
What does Download save?
A text file named after the invoice, for instance INV-2041-receipt.txt, made in the browser with a Blob and a link: the product, the invoice number, the date, the amount, the status and a line saying it is a sample from a demo. Nothing is fetched, so it works offline. The button stays out of the tab order and doesn't choose the row; Alt D (Option D on a Mac) is the keyboard route, and the status line says which receipt was saved.
Why do the actions do nothing?
Because updating a card, adding credits and cancelling a plan are real changes, and a demo must not pretend to make them. Each row is marked "In this demo only", and Enter says so on the status line without changing anything. In your app wire each to your billing provider's own flow and keep Cancel plan behind a confirmation.
How are amounts and dates written?
Amounts are stored in cents and printed by a small helper with thousands commas, as one left-to-right span so a price never flips in a right-to-left page; dates are typed text such as "1 Oct 2026", never computed from the clock. Paid and Due are words in a badge, with no red or green.
What stays local, and how do I wire it?
The receipt file is real; everything else is typed. The six invoices are constants, and Enter changes only the label on the drawn page. In your app load INVOICES from your billing provider, and have Download fetch the provider's PDF or hosted receipt URL in place of saveReceipt.
Is it accessible from the keyboard?
Yes. Type to search, the arrow keys move through the rows, Enter shows an invoice, and Alt D saves the highlighted invoice's receipt. Escape closes the menu with focus on the field, and Ctrl or ⌘ K opens the dialog while focus is inside the block, and only then. The rows are options of a combobox and the first is highlighted when it opens.