404 With Destination Cards

Error4: 404 With Destination Cards

A 404 page that turns a dead end into navigation: under the centered message sits a grid of destination cards, each with an icon, title, description, and hover arrow, followed by a centered row of fallback buttons.

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

Base UI flavor

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

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

Quick start

The installed file exports error4Demo alongside the block: the exact props behind the preview above. Spread it to get a working 404 screen in one line.

import { Error4, error4Demo } from "@/components/beste/block/error4";

export default function NotFound() {
  return <Error4 {...error4Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { BookOpen, House, LifeBuoy } from "lucide-react";
import { Error4 } from "@/components/beste/block/error4";

export default function NotFound() {
  return (
    <Error4
      code="404"
      heading="That page is missing"
      description="Pick up where you left off with one of these."
      items={[
        {
          title: "Documentation",
          description: "Setup guides, API reference, and recipes",
          href: "/docs",
          icon: BookOpen,
        },
        {
          title: "Help center",
          description: "Answers to the questions we get most",
          href: "/help",
          icon: LifeBuoy,
        },
      ]}
      buttons={[{ label: "Back to home", href: "/", icon: House }]}
    />
  );
}

Props

type DestinationCard = {
  title: string;
  description?: string;
  href: string;
  icon?: LucideIcon;
};

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

Behavior notes

• Every card is a real link element wrapping its own icon, title, and description, so the entire card surface is clickable and crawlers see an ordinary anchor with href, not a scripted handler.
• The grid is one column on mobile and two from the sm breakpoint up, which keeps card titles on a single line regardless of how many items are passed.
• Card hover swaps the surface from bg-card to bg-muted and nudges the trailing arrow 2px right, both driven by the named group/error4 group so nested hover targets stay independent.
• The icon slot is optional per card: without an icon the text column simply starts at the card's left padding, so mixed icon and text-only cards still line up.
• The block is fully static with no client state, so it renders on the server and works with JavaScript disabled.