DocsNotFound

The body of a docs 404, drawn inside the docs shell so the sidebar stays.

404

Page not found

No page answers to this address. It may have moved, so search for it.

/docs/guides/web-hooks

Or start from one of these

View code

tsx

<DocsNotFound
	path={url.pathname}
	search={
		<SearchField aria-label="Search the docs">
			<SearchField.Input name="q" defaultValue={searchQueryFromPath(url.pathname)} />
		</SearchField>
	}
	links={[
		{ title: "Quickstart", href: "/examples/docs/quickstart", description: "Add your first monitor." },
		{ title: "API overview", href: "/examples/docs/api/overview", description: "Create monitors from code." },
	]}
	labels={{
		eyebrow: "404",
		title: "Page not found",
		body: "No page answers to this address. It may have moved, so search for it.",
		linksTitle: "Or start from one of these",
	}}
/>

Demo docs sites

Whole pages built only from @sdxc/ui, each for an invented product with its own palette and type. They open in a new tab.

Every demo, landings and docs sites alike, is listed in the demo gallery.

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

Terminal

npm add @sdxc/ui remix

typescript

import "@sdxc/ui/theme.css";

Usage

typescript

import { DocsNotFound } from "@sdxc/ui/docs";

Renders the 404 body: eyebrow, title at the ambient heading level, a sentence, the missing address as code that wraps on a phone, the search slot, then the start links under a heading one level deeper.

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.

Prop	Type	Required	Description
`path`	`string`	Yes	The address that matched nothing, shown as code so the reader spots the typo.
`search`	`RemixNode`	No	The app's search field, pre-filled with searchQueryFromPath of `path`.
`links`	`Link[]`	Yes
`labels`	`Labels`	Yes

Also accepts everything in Omit<TagProps<"div">, "title">.

Other components this module publishes.

searchQueryFromPath