404 page

Page not found, with a search across the pages people likely wanted, a way back and home, popular pages and a report link.

$ pnpm dlx shadcn@latest add @dashral/not-found

When to use

A 404 that helps: a search across the pages people likely wanted, a way back, popular pages and a report link.
Any site or app's not-found page.

When not to use

Pages that exist but the person can't open: say they need access, not that the page is missing.
Errors on your side: a 500 page says it's yours to fix, not theirs.

Usage

404 page with your own data: every prop has the sample as its default, so pass only what you have.

example.tsx

1import { NotFound } from "@/components/dashral/blocks/not-found"
2
3<NotFound
4  pages={searchablePages}
5  homeHref="/"
6  onOpen={(page) => router.push(page.href)}
7  onReport={(path) => api.feedback.brokenLink(path)}
8/>

API reference

NotFound

A "page not found" page that helps people on: the code, what happened, a search across the pages they likely wanted, a way back and home, the most visited pages, and a way to report a broken link. Use it as app/not-found.tsx; every part comes from props.

Prop	Type	Default
`code`	`string`	`"404"`
`title`	`React.ReactNode`	`sample`
`description`	`React.ReactNode`	`sample`
`pages`	`NotFoundPage[]` The popular pages, as cards (and searched); none hides them.	`sample`
`more`	`NotFoundPage[]` More pages, searched only.	`sample`
`homeHref`	`string`	`"#"`
`onOpen`	`(page: NotFoundPage) => void` Enter in the search, with the first match: go there with your router (it follows the link without it).	—
`onReport`	`((url: string) => Promise<void> \| void) \| null` "Report a broken link", with the address that wasn't found (a throw takes the thanks back); null hides it.	`sample`

type NotFoundPage

A page to search and jump to; the popular ones show as cards, with an icon.

Prop	Type	Default
`title`	`string`	—
`description`	`string`	—
`href`	`string`	—
`icon`	`React.ComponentType<{ className?: string; "aria-hidden"?: boolean }>`	—