Editorial 404 Section Index

Error14: Editorial 404 Section Index

An editorial 404: a square eyebrow and the status code sit over a hairline rule, then an oversized headline with an accent-coloured clause, and a ruled index of the sections visitors reach for next.

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/error14?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

This installs the block to components/beste/block/error14.tsx, plus the two design-system primitives it renders through: badge6 for the square eyebrow and button1 for the seal call to action.

Quick start

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

import { Error14, error14Demo } from "@/components/beste/block/error14";

export default function NotFound() {
  return <Error14 {...error14Demo} />;
}

Then replace the demo with your own props. The emphasis inside the heading comes from a <strong> tag, not a separate prop:

import { Error14 } from "@/components/beste/block/error14";

export default function NotFound() {
  return (
    <Error14
      label="Page Not Found"
      code="404"
      heading="This address leads <strong>nowhere at all</strong>."
      description="Either the page was retired, or the link that carried you here was typed a little wrong."
      button={{ label: "Take me home", href: "/" }}
      linksLabel="Where people go next"
      links={[
        { title: "Work", description: "Selected projects and case studies", href: "/work" },
        { title: "Contact", description: "Start a project or ask a question", href: "/contact" },
      ]}
    />
  );
}

Props

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

type IndexLink = {
  title: string;
  description?: string;
  href: string;
};

Behavior notes

• heading is injected with dangerouslySetInnerHTML, so it accepts inline HTML. Wrap the words that should take the accent colour in <strong> and keep the value under your own control, never user input.
• The eyebrow divider is conditional: the thin vertical rule only appears when both label and code are present, so either one alone still reads correctly.
• Index rows are separated by top borders rather than a boxed table, and each row's arrow chip flips to the accent colour on hover through the named group/error14 group.
• The layout is a single column until the lg breakpoint, where the description and the index split into two columns.
• Everything is static markup with no client state, so the page renders on the server and works with JavaScript disabled.