shadcn.io is not affiliated with official shadcn/ui
Search Command 404 Error Block for Vue
A full-height 404 page for a knitting-pattern library: the display 404, a heading that names the missing address, an inline command list in a framed panel that shows five popular pages and filters ten as you type, and one button to the homepage.
Installation
Overview
Turn a dead end into a search, with this 404 page for Vue with Ark UI. It's the not-found page of Purlwise, a knitting-pattern library: 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, holding the content a little above the middle. The display "404" is for the eye and hidden from screen readers; the heading, "That pattern isn't here", says what happened, and one sentence names the missing address in monospace. Under it a Command sits in a framed panel with corner marks from Guides: with nothing typed it lists five popular pages, and typing filters ten pages in two groups, patterns and guides, by what their titles hold. A strip of Kbd hints and a count sits under the list, and the Shine Button leads to the homepage, the only colored control. It's built from Command, Kbd, Shine Button and Guides, with a CSS entrance only. For any site that wants its 404 to help people find the page they meant.
FAQ
What happens when I pick a page, and what stays in the page?
Nothing leaves the page. Pressing Enter on a row, or clicking it, writes "Opening" and the page's title in a polite status message and says nothing navigated; the field and the list stay as they were. To wire it for real, go to the page's path when a row is chosen. Do it in the command's onSelect, which hands you the chosen row's value. Link the rows (and the homepage button) to real addresses too, so they also work without script.
Does this page return a 404?
The block draws the page; the status comes from your server. Answer the request with a real 404 (your framework's not-found handling does this), or search engines will treat the page as a normal one and may keep indexing the dead address. The address in the sentence is typed in the file (MISSING): in your app, read it from the request.
How does the search match, and what does it announce?
It looks for what you typed anywhere in a page's title, ignoring case, so "knit" finds "Cable-knit beanie". With nothing typed it shows the five popular pages under one heading; a group with no matches disappears; with no matches at all the list says which word found nothing. The list keeps its height, so nothing under it moves while you type, and the count is read out politely about half a second after the last keystroke, never per letter. Escape clears the field and brings the popular pages back.
How do I use my own pages?
Edit PAGES. Each page has a group (Patterns or Guides), a label, a path, a popular flag and a value that is unique. The pages flagged popular are the five shown before anything is typed, and they are listed under their own heading. For a large site, filter on your server or search index instead and pass the first few results to the list.
Does the search field take focus when the page loads?
No. Some command libraries focus their field as they mount, which would pull a page's focus and scroll position away from the reader, so the block hands focus back a moment later unless the reader has already moved. Click the field or tab to it and it works as any search field does.