Fullscreen 404 With Background

Error10: Fullscreen 404 With Background

A screen-height 404 for marketing sites: a full-bleed photograph sits under a dark overlay with the message centred in white on top, closing with a solid button and a bordered ghost button.

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

Base UI flavor

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

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

Quick start

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

import { Error10, error10Demo } from "@/components/beste/block/error10";

export default function NotFound() {
  return <Error10 {...error10Demo} />;
}

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

import { House } from "lucide-react";
import { Error10 } from "@/components/beste/block/error10";

export default function NotFound() {
  return (
    <Error10
      code="Error 404"
      heading="You have wandered off the map"
      description="This address does not lead anywhere."
      buttons={[
        { label: "Back to home", href: "/", icon: House },
        { label: "Browse the site", href: "/blog", variant: "outline" },
      ]}
      image={{
        src: "https://images.unsplash.com/photo-1539412060677-d70658ece18d?w=1920&h=1280&fit=crop",
        alt: "Empty desk with a laptop in dim light",
      }}
    />
  );
}

Props

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

Behavior notes

• The section is min-h-screen and centres its content, so the block fills the viewport rather than sitting in the normal document flow. It is registered as a fullscreen block, which is why the preview above renders in its own frame.
• Because the surface is a fixed dark overlay rather than a themed panel, the text and buttons use hardcoded white and black values instead of theme tokens, so the block reads the same in light and dark mode.
• variant: "outline" swaps the button for a transparent pill with a white border and a translucent hover fill; anything else renders the solid white button with black text.
• The background image and its overlay only render when image is set. Without it the block falls back to the page background, and the white text will need a dark surface behind it.