404 With Featured Work

Error24: 404 With Featured Work

A studio 404 for a dead project URL: the apology and a seal button sit under the eyebrow rule, then two large project cards with category lines and arrow chips that take the accent colour on hover.

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

Base UI flavor

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

This installs the block to components/beste/block/error24.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 error24Demo alongside the block: the exact props behind the preview above. Spread it to get a working error page in one line.

import { Error24, error24Demo } from "@/components/beste/block/error24";

export default function NotFound() {
  return <Error24 {...error24Demo} />;
}

Then pass your own projects. The category line is optional per card:

import { Error24 } from "@/components/beste/block/error24";

export default function NotFound() {
  return (
    <Error24
      label="Lost Page"
      code="404"
      heading="You found <strong>the one empty shelf</strong>."
      description="Whatever sat at this address has been packed away."
      button={{ label: "Open the archive", href: "/archive" }}
      projectsLabel="Worth a look instead"
      projects={[
        {
          title: "Meridian rebrand",
          category: "Identity, 2026",
          href: "/work/meridian",
          image: { src: "/images/meridian.jpg", alt: "Printed brand identity pieces" },
        },
        {
          title: "Foldwork storefront",
          category: "Commerce, 2025",
          href: "/work/foldwork",
          image: { src: "/images/foldwork.jpg", alt: "Storefront dashboard on a screen" },
        },
      ]}
      link={{ label: "See every project", href: "/work" }}
    />
  );
}

Props

type ProjectItem = {
  title: string;
  category?: string;
  href: string;
  image: { src: string; alt: string };
};

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

Behavior notes

• Each card is one link wrapping the image, category line, title and arrow chip, so the whole card is clickable and the markup stays a plain anchor.
• Images sit in a 4:3 aspect box with object-cover and do not move on hover. The only hover change is the arrow chip beside the title flipping to the accent colour, driven by the named group/error24 group.
• The grid is one column on mobile and two from the md breakpoint up, which is why two projects fill a row exactly.
• The project section, its caption and the closing link all sit behind the same check: nothing below the seal button renders when projects is empty.
• heading is injected with dangerouslySetInnerHTML and accepts inline HTML; <strong> takes the accent colour. Keep the value under your own control, never user input.