shadcn.io is not affiliated with official shadcn/ui
Illustrated Filing Drawer 404 Error Block for Ark UI
A full-height 404 page for a bookkeeping app whose picture is the way back: a drawn filing drawer with three folders that are links and one dashed slot for the missing page.
Installation
Overview
Make the picture on your 404 page do some work, with this illustrated 404 block for React with Ark UI. It's the not-found page of Penstack, a bookkeeping app for freelancers: the page's rails run its full height and one band crosses the screen between two rules with a plus mark at each end. In the band the copy comes first, with the numerals, the heading, one sentence, a Shine Button link back to the books and an outline Button link to search. Beside it, first on wide screens, a drawn filing drawer sits in a Frame inset: three labelled folders (Invoices, Clients, Reports) stand in it as real links that lift a little on hover and keyboard focus, and one dashed slot with a magnifier says "This one is gone". On a phone the drawing sits under the actions and is shorter. It's built from Frame, Shine Button, Button and Guides, with CSS only. For any app with a few top-level places to send a lost visitor.
FAQ
Does this page set the 404 status?
No, a block can't: your server sends the status. Render the page from your framework's not-found route so the response is a real 404, not a 200 that says "not found". The link to search and the folders are for people; the status is for crawlers and caches.
Where do the links go?
Nowhere in this demo: all five are links to #. Point the two buttons and each folder at a real route. The buttons are Shine Button and Button with asChild around an a element. The folders are plain a elements in a list inside a named nav.
How do I change the folders?
Edit the FolderLink rows in the drawer: each takes a label. The dashed slot is a separate GoneSlot placed third, where the missing page stood; move it, or drop it if you have no particular page to point at. The grid is four across, so three folders and the slot fill it; for more, widen the grid and shorten the labels, which truncate on a narrow phone.
Is the drawing accessible?
The folders are real links with their names as text, in a nav called "Penstack folders", and the slot's words are read as text, so nothing important lives only in the picture. The drawer's front, the handle and the tabs are decoration and hidden from assistive technology. Each folder has a visible focus ring, and it lifts on focus as it does on hover.