404 Support Panel

Error5: 404 Support Panel

A card-style 404 panel for apps and documentation: it echoes the requested URL back in monospace, pairs a browser-history back button with ordinary link actions, and closes with a support and status link row.

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

Base UI flavor

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

This installs the block to components/beste/block/error5.tsx, plus the button shadcn/ui primitive it uses for the back and action buttons.

Quick start

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

import { Error5, error5Demo } from "@/components/beste/block/error5";

export default function NotFound() {
  return <Error5 {...error5Demo} />;
}

To show the URL that actually failed, read the pathname on the client and pass it in:

"use client";

import { House, Mail } from "lucide-react";
import { usePathname } from "next/navigation";
import { Error5 } from "@/components/beste/block/error5";

export default function NotFound() {
  const pathname = usePathname();

  return (
    <Error5
      code="Error 404"
      heading="We cannot find that page"
      description="The address below did not match anything on this site."
      pathLabel="Requested URL"
      path={pathname}
      backLabel="Go back"
      buttons={[{ label: "Back to home", href: "/", icon: House }]}
      supportLabel="Still stuck?"
      supportLinks={[{ label: "Contact support", href: "/support", icon: Mail }]}
    />
  );
}

Props

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

type SupportLink = {
  label: string;
  href: string;
  icon?: LucideIcon;
};

Behavior notes

• The back button calls window.history.back() unless an onBack handler is passed, in which case only that handler runs. Pass onBack when you need router-aware navigation instead of a raw history step.
• The button only renders when backLabel is set, so leaving the label out gives a panel with link actions only.
• The echoed URL is truncated with truncate inside its own bordered box, so a long path shortens with an ellipsis rather than widening the card or wrapping across lines.
• The whole URL box only renders when path is set; pathLabel on its own renders nothing.
• The support row is separated by a top border and only renders when supportLinks is non-empty, which also hides supportLabel along with it.