404 With Product Recommendations

Error11: 404 With Product Recommendations

A store 404 for dead product URLs: the apology and the shopping actions sit above a four-up grid of square product cards, each with a price and an optional strikethrough compare-at price.

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

Base UI flavor

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

This installs the block to components/beste/block/error11.tsx, plus the button shadcn/ui primitive it uses for the shopping actions.

Quick start

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

import { Error11, error11Demo } from "@/components/beste/block/error11";

export default function NotFound() {
  return <Error11 {...error11Demo} />;
}

Then feed it your own recommendations. Prices are plain strings, so currency and formatting stay under your control:

import { ShoppingBag } from "lucide-react";
import { Error11 } from "@/components/beste/block/error11";

export default function NotFound() {
  return (
    <Error11
      code="404"
      heading="This product is no longer available"
      description="The item you were looking for is sold out or has been retired."
      buttons={[{ label: "Continue shopping", href: "/shop", icon: ShoppingBag }]}
      productsLabel="Popular right now"
      products={[
        {
          title: "Everyday Canvas Tote",
          price: "$48",
          href: "/products/canvas-tote",
          image: { src: "/images/tote.jpg", alt: "Canvas tote bag" },
        },
        {
          title: "Merino Crew Knit",
          price: "$96",
          originalPrice: "$120",
          href: "/products/merino-crew",
          image: { src: "/images/knit.jpg", alt: "Folded knit sweater" },
        },
      ]}
    />
  );
}

Props

type ProductItem = {
  title: string;
  price: string;
  originalPrice?: string;
  href: string;
  image: { src: string; alt: string };
};

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

Behavior notes

• The grid is one column on mobile, two from sm and four from lg, which is why the demo ships four products: any multiple of four fills the last row cleanly.
• Product images sit in a square aspect box with object-cover, so portrait and landscape source files crop to the same tile instead of changing the row height.
• The whole product card is one link element wrapping the image, title and price, so the entire tile is clickable and crawlers see an ordinary anchor.
• Hovering a card scales its image to 105% over 500ms through the named group/error11 group; the tile keeps overflow-hidden so the crop stays inside the border.
• price and originalPrice are strings, not numbers: no currency formatting or discount maths happens inside the block, and the compare-at price only renders when originalPrice is set.
• The product section, including its caption, only renders when products is non-empty, so the same block covers a plain apology page.