shadcn.io is not affiliated with official shadcn/ui
Print Failed Error Block for Vue
A full-screen page for an invoice that would not print: a drawn two-sheet thumbnail, a printer picker whose state decides what happens, a six-line checklist that can turn a printer ready, and a Save a copy that is a real PDF.
Installation
Overview
Say which printer failed and what would fix it, with this print failed page for Vue with Ark UI. It's the screen Invoiceloft, an invoicing app, shows when an invoice would not print: a whole screen with the page's rails and one band across it, split in two. At the start, the heading "Invoice 0342 didn't print", a drawn two-sheet thumbnail of the file with its page count and size, a Native Select of four printers with their state in words (Front desk ready, Back office offline, Warehouse out of paper, Save as PDF ready), the state and its fix, and the Shine Button "Print on Back office". At the end, framed by Guides, a six-line checklist (the printer is on, paper in the tray, no jam, the same network, an empty queue, the right paper size). Ticking the line that fixes a printer turns it ready, and a Download Trigger behind Save a copy hands you a real two-page PDF. It's built from Native Select, Shine Button, Button, Badge and Guides, with a CSS entrance only. For any product that prints documents.
FAQ
What does Print on do?
Nothing is printed. With a ready printer it waits a moment and says in a polite status line that the job went to the demo queue and that nothing prints. With a printer that is offline or out of paper it names the fix and moves focus to the matching line of the checklist, so the first press is never a dead end. To make it real, send the job to your print service from print and map its answer onto the state words.
What does ticking the checklist do?
Each printer that is not ready has one line of the checklist as its fix: Back office needs the printer on and online, Warehouse needs paper in the tray. Ticking that line turns the printer ready in the picker and under it, with a note that this is going by what you ticked and that a real page would ask the printer. The other four lines are yours to tick; they change nothing but the count.
Is Save a copy a real file?
Yes. The page builds a small two-page PDF in the browser from the invoice's typed lines (a catalog, two pages, a font and a cross-reference table, all plain text) and the Download Trigger hands it to the browser, so you get an actual invoice-0342.pdf. It is a sample made by this demo, not a real invoice. The file's size under the thumbnail is the size of that PDF.
Why does the page never open the system print dialog?
A page that calls window.print() prints itself, with its headings and its buttons, and the visitor never sees the printer list the page just described. Printing one document means a file the browser or the operating system prints, which is why the honest fallback here is the PDF. A browser can't list a visitor's printers either, so the four here are typed.
Is the picker accessible?
It is a native select with a visible label, so it works with every keyboard and screen reader and opens the platform's own list on a phone. The state word and its fix sit beside it in text, in a badge with a shape (a check or a cross) as well as the word, and the checklist is real checkboxes inside labels.