404 With Site Directory

Error13: 404 With Site Directory

A 404 page that doubles as a sitemap: left-aligned messaging over four columns of grouped section links, so a visitor on a large site can jump straight to the area they wanted instead of starting from the homepage.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/error13?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/error13?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/error13.tsx, plus the button shadcn/ui primitive it uses for the closing action.

Quick start

The installed file exports error13Demo alongside the block: the exact props behind the preview above. Spread it to get a working directory page in one line.

import { Error13, error13Demo } from "@/components/beste/block/error13";

export default function NotFound() {
  return <Error13 {...error13Demo} />;
}

Then pass your own sections. Two groups read as well as four:

import { House } from "lucide-react";
import { Error13 } from "@/components/beste/block/error13";

export default function NotFound() {
  return (
    <Error13
      code="Error 404"
      heading="We cannot find that page"
      description="Here is everything on the site in one place."
      groups={[
        {
          title: "Product",
          links: [
            { label: "Overview", href: "/product" },
            { label: "Pricing", href: "/pricing" },
          ],
        },
        {
          title: "Developers",
          links: [
            { label: "Documentation", href: "/docs" },
            { label: "Status", href: "/status" },
          ],
        },
      ]}
      buttons={[{ label: "Back to home", href: "/", icon: House }]}
    />
  );
}

Props

type DirectoryGroup = {
  title: string;
  links: DirectoryLink[];
};

type DirectoryLink = {
  label: string;
  href: string;
};

type ActionButton = {
  label: string;
  href: string;
  variant?: "default" | "outline" | "secondary" | "ghost";
  icon?: LucideIcon;
};

Behavior notes

• The directory is one column on mobile, two from sm and four from lg, so four groups fill the last row exactly. Three or five groups still tile, they simply leave a gap in the final row at lg.
• Links render as a real ul/li list inside each column, which keeps the directory meaningful to screen readers and crawlers rather than reading as a wall of loose anchors.
• A hairline rule separates the message from the directory, and the whole directory block, including the rule, only renders when groups is non-empty.
• Everything is static markup with no client state, so the page renders on the server and works with JavaScript disabled.