# 404 Pages

> Five full-screen 404 pages, from digits that fall and stack on springs to a split-flap departure board, stretchy pointer-following type, a terminal route trace and a searchable signpost.

- Collection: Pages
- Tier: pro
- Docs: https://geturui.com/docs/not-found-pages
- Install: `npx shadcn@latest add @geturui-pro/not-found-pages`
- Dependencies: motion, lucide-react

## Variants

### Falling blocks

The 404 digits and a few word blocks drop into a pile on bouncy springs; drag any block and it springs back, press it to bump it.

Install: `npx shadcn@latest add @geturui-pro/not-found-pages-falling-blocks`

```tsx
import { FallingBlocks } from "@/components/pages/not-found-pages/falling-blocks";

export default function NotFound() {
  return (
    <FallingBlocks
      brand="Kiln"
      path="/boards/q3-roadmap-old"
      onSearch={() => console.log("open search")}
    />
  );
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| brand | `string` | "Kiln" | Name in the top bar and buttons. |
| path | `string` | — | The path that wasn't found, shown in the copy. |
| heading | `string` | — | Main heading. |
| description | `string` | — | Supporting paragraph. |
| homeHref | `string` | "/" | Where the brand and back button point. |
| onSearch | `() => void` | — | Called when the search button is pressed. |
| links | `{ label: string; href: string; hint?: string }[]` | — | Helpful pages listed beside the pile. |
| className | `string` | — | Classes for the outer section. |

### Flip panels

An airport split-flap board where every cell rattles through the alphabet to spell the cancelled route, with live departures to pick instead.

Install: `npx shadcn@latest add @geturui-pro/not-found-pages-flip-panels`

```tsx
import { FlipPanels } from "@/components/pages/not-found-pages/flip-panels";

export default function NotFound() {
  return <FlipPanels brand="Meridian" path="/plans-2024" />;
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| brand | `string` | "Meridian" | Brand in the header. |
| path | `string` | — | Missing path, spelled out on the board. |
| width | `number` | 18 | Characters per board row. |
| heading | `string` | — | Main heading under the board. |
| description | `string` | — | Supporting paragraph. |
| departures | `{ path: string; label: string; status: string }[]` | — | Alternative destinations listed as departures. |
| homeHref | `string` | "/" | Where the brand links. |
| className | `string` | — | Classes for the outer section. |

### Elastic type

Giant 404 glyphs stretch, skew and lean toward the pointer, then snap back on jelly springs; a wobble button pokes them from the keyboard.

Install: `npx shadcn@latest add @geturui-pro/not-found-pages-elastic-type`

```tsx
import { ElasticType } from "@/components/pages/not-found-pages/elastic-type";

export default function NotFound() {
  return (
    <ElasticType
      brand="Pliant"
      primaryAction={{ label: "Go to your studio", href: "/studio" }}
    />
  );
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| brand | `string` | "Pliant" | Brand in the header. |
| homeHref | `string` | "/" | Where the brand links. |
| code | `string` | "404" | Characters rendered as stretchy type. |
| heading | `string` | — | Line under the digits. |
| description | `string` | — | Supporting paragraph. |
| primaryAction | `{ label: string; href: string }` | — | Volt button. |
| secondaryAction | `{ label: string; href: string }` | — | Secondary button. |
| links | `{ label: string; href: string }[]` | — | Header navigation links. |
| className | `string` | — | Classes for the outer section. |

### Terminal trace

A terminal types out a route trace that fails with HTTP 404, then lists ranked suggestions and accepts real `cd`, `ls` and `help` commands.

Install: `npx shadcn@latest add @geturui-pro/not-found-pages-terminal-trace`

```tsx
import { TerminalTrace } from "@/components/pages/not-found-pages/terminal-trace";
import { useRouter } from "next/navigation";

export default function NotFound() {
  const router = useRouter();
  return <TerminalTrace host="gantry.dev" path="/docs/cli/deploy-v1" onNavigate={(p) => router.push(p)} />;
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| brand | `string` | "Gantry" | Product name in the copy. |
| homeHref | `string` | "/" | Where the back button points. |
| host | `string` | "gantry.dev" | Host shown in the trace. |
| path | `string` | — | The missing path being traced. |
| suggestions | `{ path: string; title: string; match: number }[]` | — | Closest pages, with a 0–100 match score. |
| typingSpeed | `number` | 18 | Milliseconds per typed character. |
| onNavigate | `(path: string) => void` | — | Called when a suggestion is picked or `cd <path>` is run. |
| className | `string` | — | Classes for the outer section. |

### Wayfinder

A trail signpost whose arms swing in and sway on hover, beside a search combobox that filters pages with highlighted matches.

Install: `npx shadcn@latest add @geturui-pro/not-found-pages-wayfinder`

```tsx
import { Wayfinder } from "@/components/pages/not-found-pages/wayfinder";
import { useRouter } from "next/navigation";

export default function NotFound() {
  const router = useRouter();
  return <Wayfinder brand="Switchback" onSelect={(page) => router.push(page.href)} />;
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| brand | `string` | "Switchback" | Brand in the header and search label. |
| homeHref | `string` | "/" | Where the brand links. |
| heading | `string` | — | Main heading. |
| description | `string` | — | Supporting paragraph. |
| signs | `{ label: string; href: string; direction: "left" | "right" }[]` | — | Arms on the signpost. |
| pages | `{ title: string; href: string; section: string; keywords?: string[] }[]` | — | Searchable pages. |
| onSelect | `(page: WayfinderPage) => void` | — | Called when a result is chosen with Enter or a click. |
| className | `string` | — | Classes for the outer section. |

## Accessibility

- Every page has a real h1 that states the error; decorative digits and art are aria-hidden or labelled as a single image.
- Interactive pieces (draggable blocks, suggestions, signposts, the search combobox) are buttons or links reachable by keyboard, with arrow-key navigation where lists are involved.
- Under reduced motion, falls, flaps and stretches are skipped and content renders in its final state.

## Source

Pro item — send `Authorization: Bearer <registry token>` to include the source.