# Dead End Sign Not Found

> Dark 404 on a night road: a DEAD END warning sign beside a highway guide sign, then a monospace code, large headline, body and home button. Pulls in Geist Mono and Hanken Grotesk.

A shadcn/ui block from the [@01orbital](https://01orbital.dev/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/01orbital/404-09).

- Page, with a live preview: https://shadcn.exchange/r/01orbital/404-09
- Screenshot: https://shadcn.exchange/shot/01orbital/404-09/light.png
- Registry item: https://01orbital.dev/r/404-09.json
- Categories: 404
- Listed: 2026-11-01, source last changed 2026-11-01

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/01orbital/404-09.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `@phosphor-icons/react`, `cn`
- Registry items: `@01orbital/button`, `@01orbital/eyebrow`, `@01orbital/heading`, `@01orbital/road-signs`, `@01orbital/section`

## Files

### `blocks/404/404-09/index.tsx`

```tsx
import { ArrowLeftIcon } from "@phosphor-icons/react/dist/ssr"
import { cn } from "cn"

import { Eyebrow } from "@/components/editorial/eyebrow"
import { Heading } from "@/components/editorial/heading"
import { SectionDescription } from "@/components/editorial/section"
import {
  HighwaySign,
  WarningSign,
} from "@/components/graphics/road-signs"
import { buttonVariants } from "@/components/ui/button"

const SIGNS = {
  warning: { text: "DEAD", subtext: "END" },
  route: "ONWARD",
} as const

// The copy: change text here, not in the markup.
const COPY = {
  eyebrow: "404",
  title: "This page does not exist.",
  body: "There is nothing at this address. Everything else is still where you left it.",
  cta: "Back to home",
  onward: "Somewhere real instead",
} as const

const DESTINATIONS = [
  { href: "#", name: "Home", description: "Start from the surface." },
  { href: "#", name: "Browse", description: "The whole catalog, filterable." },
  { href: "#", name: "Docs", description: "How the pieces are made." },
  { href: "#", name: "Changelog", description: "What shipped, newest first." },
] as const

// The way back.
function HomeLink({ className }: { className?: string }) {
  return (
    <a
      href="#"
      data-slot="button"
      className={cn(
        buttonVariants({ size: "lg" }),
        "h-auto min-h-10 max-w-full py-2 text-center whitespace-normal",
        className
      )}
    >
      <ArrowLeftIcon data-icon="inline-start" aria-hidden="true" />
      {COPY.cta}
    </a>
  )
}

// A dead end on the night road; the guide sign points back the way you came.
export default function NotFound09() {
  return (
    <section className="dark @container/section flex min-h-[40rem] w-full flex-col items-center justify-center gap-10 bg-background px-6 py-24 wrap-anywhere text-foreground">
      <div className="flex max-w-full flex-wrap items-end justify-center gap-6">
        <WarningSign
          className="aspect-square h-auto max-w-full"
          text={SIGNS.warning.text}
          subtext={SIGNS.warning.subtext}
        />
        <HighwaySign
          className="max-w-full [&_.justify-between]:gap-[min(2rem,10vw)]"
          route={SIGNS.route}
          destinations={DESTINATIONS.slice(0, 3).map((d, i) => ({
            name: d.name,
            distance: String(i),
          }))}
        />
      </div>
      <header className="flex max-w-xl flex-col items-center gap-6 text-center">
        <Eyebrow>{COPY.eyebrow}</Eyebrow>
        <Heading render={<h1 />} size="lg">
          {COPY.title}
        </Heading>
        <SectionDescription size="md" variant="muted" className="max-w-lg">
          {COPY.body}
        </SectionDescription>
        <HomeLink />
      </header>
    </section>
  )
}
```