Search by name, tag, category or type
Source and install need .
pnpm dlx shadcn@latest add @assembli/not-found-pageA full-page 404 for a product site. Large digits drift with the pointer above a trace that drops out, and a kind line echoes the missing path. Below: "Did you mean" links ranked by edit distance with the corrected characters marked, search (callback or ?q= link), Go home and a hydration-safe Go back, popular destinations and a broken-link report.
Other props pass through to the root element.
path
string
The path that wasn't found. Defaults to the current location once the page has loaded.
code
string
Default "404"
The status shown in the large digits.
title
React.ReactNode
Default "Page not found"
description
React.ReactNode
Replaces the default line, which echoes path.
pages
NotFoundPageLink[]
Default []
Known pages. The closest ones to path by edit distance become "Did you mean" links.
destinations
NotFoundDestination[]
Default DEFAULT_DESTINATIONS
Up to four cards under the search. Pass [] to hide them.
homeHref
string
Default "/"
searchHref
string
Default "/search"
Where search goes when there's no onSearch: ${searchHref}?q=….
onSearch
(query: string) => void | Promise<void>
Takes over search. Return a promise to show a pending state on the button.
onReport
(path: string) => void | Promise<void>
Called by "Report a broken link". Without it the link opens a mail to reportEmail.
reportEmail
string
Default "support@example.com"
| Prop | Type | Default | Description |
|---|---|---|---|
| path | string | – | The path that wasn't found. Defaults to the current location once the page has loaded. |
| code | string | "404" | The status shown in the large digits. |
| title | React.ReactNode | "Page not found" | |
| description | React.ReactNode | – | Replaces the default line, which echoes path. |
| pages | NotFoundPageLink[] | [] | Known pages. The closest ones to path by edit distance become "Did you mean" links. |
| destinations | NotFoundDestination[] | DEFAULT_DESTINATIONS | Up to four cards under the search. Pass [] to hide them. |
| homeHref | string | "/" | |
| searchHref | string | "/search" | Where search goes when there's no onSearch: ${searchHref}?q=…. |
| onSearch | (query: string) => void | Promise<void> | – | Takes over search. Return a promise to show a pending state on the button. |
| onReport | (path: string) => void | Promise<void> | – | Called by "Report a broken link". Without it the link opens a mail to reportEmail. |
| reportEmail | string | "support@example.com" |