Staaarter

404 With Site Search

A 404 screen built around recovery: a controlled search input that submits to an onSearch callback, plus a bordered list of suggested pages (title, description, hover arrow) for visitors who'd rather browse than search.

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-with-site-search.json

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

Usage

The file also exports error2Demo, 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 { Error2, error2Demo } from "@/components/blocks/error/error2";

export default function Page() {
  return <Error2 {...error2Demo} />;
}

Props

PropTypeDefaultDescription
headingstring"We can't find that page"Main heading.
descriptionstring"Try searching for what you were looking for."Short explanation under the heading.
searchPlaceholderstring"Search the site..."Placeholder text for the search input.
onSearch(query: string) => void() => {}Called with the current input value when the search form is submitted.
suggestedPagesSuggestedPage[]nonePages listed below the search box as alternative destinations.
classNamestringnoneExtra classes for the outer section element.

Types

type SuggestedPage = { title: string; description: string; href: string };

Behavior notes

  • The search input is real controlled client state (useState); submitting the form calls the onSearch callback with the current query and prevents the default page navigation, no request is actually sent and no results are shown.
  • Every suggested-page row is a decorative Next.js Link via the button's render prop, pointing wherever each item's href says.

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.

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.

404-notice-card

404 Notice Card

Compact bordered 404 card with an icon badge, status label, and stacked full-width buttons.