Staaarter

404 With Product Recommendations

A store 404 for dead product URLs: centered messaging and shopping buttons sit above a 4-up product grid with square imagery, price, and an optional strikethrough compare-at price, turning a broken link into a chance to keep browsing.

By Staaarter Team
Error
Docs
Live preview

Docs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button, media-slot dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/404-with-product-recommendations.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/error/error11.tsx instead.

Usage

The file also exports error11Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Error11, error11Demo } from "@/components/blocks/error/error11";

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

Props

PropTypeDefaultDescription
eyebrowstring"404 error"Small label above the heading.
headingstring"That product isn't here anymore"Main heading text.
descriptionstring"The item you're looking for is out of stock or no longer sold. Here are some things you might like instead."Short supporting copy under the heading.
searchHrefstring"#"Link target for the Search products button.
shopHrefstring"#"Link target for the Continue shopping button.
productsHeadingstring"You might also like"Heading above the product grid.
productsError11Product[]noneProducts shown in the 4-up recommendation grid.
classNamestringnoneExtra classes for the outer section element.

Types

interface Error11Product {
  id: string;
  name: string;
  image?: MediaSlotImage;
  price: string;
  compareAtPrice?: string;
  href: string;
}

Behavior notes

  • Every product card and both top buttons render as real Next.js Link components, but all default to "#" until you supply your own hrefs, nothing is added to a cart or submitted anywhere.
  • Photos via Unsplash, reused from existing blocks.

More Error Blocks

View all →

centered-404-message

Centered 404 Message

Minimal centered 404 with two CTAs and a divided row of popular page links.

404-with-site-search

404 With Site Search

404 screen with a working search box and a bordered list of suggested pages.

split-404-with-image

Split 404 With Image

Two-column 404 with the message on one side and a full-bleed photo that scales on hover on the other.

404-with-destination-cards

404 With Destination Cards

404 screen with a grid of icon destination cards plus fallback CTA buttons.

404-support-panel

404 Support Panel

Card-style 404 echoing the requested URL, with a real back button and a support/status link row.

inline-404-line

Inline 404 Line

The smallest possible 404: code and message on one divided line with one button underneath.