# Not found

A complete 404 block: big dithered block digits that print in and catch the light, a message, a detail line and actions.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. The dithercn agent skill, for building any dither on the engine, is at [/.well-known/agent-skills/dithercn/SKILL.md](/.well-known/agent-skills/dithercn/SKILL.md).

<ComponentPreview src="examples/not-found-demo.tsx" size="lg" controls="notFoundControls">
  <NotFoundDemo />
</ComponentPreview>

## Installation [#installation]

<InstallBlock name="not-found" />

## Usage [#usage]

```tsx title="app/not-found.tsx"
import Link from "next/link";

import { DitherButton } from "@/components/dithercn/dither-button";
import { NotFound } from "@/components/dithercn/not-found";

export default function NotFoundPage() {
  return (
    <main className="grid min-h-svh place-items-center">
      <NotFound
        actions={
          <DitherButton asChild>
            <Link href="/">Back to home</Link>
          </DitherButton>
        }
      />
    </main>
  );
}
```

The code is set in your page's own font, then rasterised onto a grid of cells and turned into block letters. The faces are densest at the top and thin towards the baseline; the cells behind them, down and to the right, form an extruded side in a sparse dither. On mount the digits print in level by level, and after that a band of light crosses the faces every few seconds.

`code`, `title`, `description`, `detail` and `actions` are all yours, so the same block covers 410, 500 and maintenance pages. `detail` is a short mono line under the text, a good place for the requested path or an error reference.

## Examples [#examples]

### Server error [#server-error]

A 500 in red with a reference people can quote to support, and an outline retry button that fills with red hatching on hover.

<ComponentPreview src="examples/not-found-error.tsx" size="lg">
  <NotFoundError />
</ComponentPreview>

### Inside a card [#inside-a-card]

A missing resource inside the app shell rather than a whole page: grey dotted digits, a shallow side, finer cells and no animation.

<ComponentPreview src="examples/not-found-compact.tsx" size="lg">
  <NotFoundCompact />
</ComponentPreview>

## Props [#props]

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `code` | `string` | `"404"` | The big code. Any short string works. |
| `title` | `ReactNode` | `"Page not found"` | The heading. |
| `description` | `ReactNode` | `"The link may be broken, or the page may have moved."` | A sentence under the heading. |
| `detail` | `ReactNode` |  | A short mono line, such as the requested path or an error reference. |
| `actions` | `ReactNode` |  | Buttons or links, such as a way home. |
| `titleAs` | `"h1" \| "h2"` | `"h1"` | Heading level. Use h1 on a page of its own. |
| `color` | `DitherColor` | `"ink"` | A palette name such as "red", a CSS variable name, or any CSS colour. |
| `fill` | `"gradient" \| "dotted" \| "hatched" \| "solid"` | `"gradient"` | Texture of the digit faces. |
| `bloom` | `"off" \| "low" \| "high"` | `"off"` | A soft glow in the code's colour. |
| `cell` | `number` | `4` | Size of one dither cell in CSS pixels. |
| `depth` | `number` | `4` | Depth of the extruded side in cells. 0 gives flat digits. |
| `animate` | `boolean` | `true` | Print the digits in on mount and sweep light across them. |

## Notes [#notes]

* The digits are a decorative canvas hidden from assistive technology; the heading carries the message. Put the status in `title` or `description` if it matters to the reader.
* The grid follows the block's width, so the digits fill the space on a phone and stop at 672 pixels wide on a desktop. They are re-set when your web fonts finish loading.
* Under reduced motion, or with `animate={false}`, the digits are drawn once, finished. Offscreen and in hidden tabs, the light sweep pauses.