# 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).

> **This is an example, not the only option.** It is one component built on the dithercn engine. Install it when it is what you were asked for. For any other look, don't stretch its props to fit: write your own field on `DitherShader` ([Write your own dither](/docs/engine/write-your-own.md)), and read this example's source for technique. Its full source is in [https://dithercn.dev/r/not-found.json](https://dithercn.dev/r/not-found.json), under `files[].content`.

## Installation [#installation]

```bash
npx shadcn@latest add https://dithercn.dev/r/not-found.json
```

## 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.

```tsx title="examples/not-found-error.tsx"
import { DitherButton } from "@/components/dithercn/dither-button";
import { NotFound } from "@/components/dithercn/not-found";

export default function NotFoundError() {
  return (
    <NotFound
      titleAs="h2"
      code="500"
      color="red"
      title="Something went wrong"
      description="We could not load this page. Try again in a moment."
      detail="ref 7f3a-e21c · 14:02 UTC"
      actions={
        <DitherButton color="red" fill="hatched" variant="outline">
          Try again
        </DitherButton>
      }
      className="w-full"
    />
  );
}
```

### 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.

```tsx title="examples/not-found-compact.tsx"
import { DitherButton } from "@/components/dithercn/dither-button";
import { NotFound } from "@/components/dithercn/not-found";

export default function NotFoundCompact() {
  return (
    <div className="bg-background ring-border w-full max-w-md rounded-xl ring-1">
      <NotFound
        titleAs="h2"
        animate={false}
        cell={3}
        depth={2}
        color="grey"
        fill="dotted"
        title="Project not found"
        description="It may have been deleted, or you may not have access."
        actions={
          <DitherButton size="sm" variant="outline" color="grey">
            See all projects
          </DitherButton>
        }
        className="py-10 [&_h2]:text-lg"
      />
    </div>
  );
}
```

## 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.