Staaarter

404 Did You Mean

A left-aligned 404 built for documentation and marketing sites: the requested path renders struck-through in monospace font, followed by a "Did you mean...?" card linking to the single closest matching page, complete with icon, title, short description, and arrow.

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 dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/404-did-you-mean.json

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

Usage

The file also exports error9Demo, 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 { Error9, error9Demo } from "@/components/blocks/error/error9";

export default function Page() {
  return <Error9 {...error9Demo} />;
}

Props

PropTypeDefaultDescription
eyebrowstring"404 error"Small label above the heading.
headingstring"We couldn't find that page"Main heading text.
descriptionstring"The page you requested doesn't exist, but the docs are still here. Take a look below."Short supporting copy under the heading.
requestedPathstring"/docs/instalation-guide"The missing path, rendered struck-through in monospace.
suggestionError9SuggestionnoneThe single closest-matching page to suggest instead. Omit to hide the suggestion card.
homeLabelstring"Back to docs home"Label for the fallback link.
homeHrefstring"#"Link target for the fallback link.
classNamestringnoneExtra classes for the outer section element.

Types

interface Error9Suggestion {
  icon: LucideIcon;
  title: string;
  description: string;
  href: string;
}

Behavior notes

  • Entirely static: nothing here is measured against real site content, the "did you mean" suggestion is whatever page you pass in as a prop.
  • The suggestion card and the "Back to docs home" button render as real Next.js Link components, but both default to "#" until you supply your own hrefs, and nothing is submitted anywhere.

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.