A light 404 page with a serif headline, a live search that filters popular pages as you type, keyboard navigation and a hand-drawn arrow that draws itself in.
The page you asked for isn't here anymore. Search for it, or jump to one of the pages people visit most.
npx shadcn@latest add https://hyperblur.dev/r/notfound-search.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/notfound-search.tsx.
import { NotfoundSearch } from "@/components/hyperblur/notfound-search"
<NotfoundSearch pages={[{ title: "Pricing", href: "/pricing", description: "Plans for every team" }]} onSearch={(q) => console.log(q)} />| Prop | Type | Default | Description |
|---|---|---|---|
| code | string | "404" | Code shown in the chip above the headline. |
| title | string | "Page not found" | Main headline. |
| titleEmphasis | string | "not found" | Part of the title set in italic accent. Ignored when it is not in the title. |
| subtitle | string | "The page you asked for isn't here anymore..." | Helper text under the headline. Hidden when empty. |
| pages | { title: string; href: string; description?: string; section?: string }[] | 8 sample pages | Pages to search through. Matches title, description and section. |
| placeholder | string | "Search pages, docs and guides" | Search input placeholder. |
| note | string | "start typing" | Handwritten note next to the arrow. The doodle shows on wide containers. |
| limit | number | 5 | Maximum results listed at once. |
| shortcut | boolean | false | Focus the search when the / key is pressed anywhere on the page. |
| primary | { label: string; href: string } | { label: "Back to home", href: "/" } | Main button. |
| secondary | { label: string; href: string } | { label: "Report a broken link", href: "mailto:..." } | Text link for reporting the broken link. |
| onReport | () => void | Called when the report link is clicked. | |
| onSearch | (query: string) => void | Called on every change of the search text. | |
| accent | string | "#e8613c" | Italic title, highlights, focus rings and arrow icons. |
| className | string | Extra classes on the section. | |
| style | CSSProperties | Inline styles on the section. |