Not Found With Search

A not-found page pairing an oversized light heading with a full-colour image tile floating a real controlled search panel (input plus circular submit button), and a two-column hairline list of likely destinations below.

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/not-found-with-search.json

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

Usage

The file also exports error36Demo, 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 { Error36, error36Demo } from "@/components/blocks/error/error36";

export default function Page() {
  return <Error36 {...error36Demo} />;
}

Props

Prop	Type	Default	Description
eyebrow	string	"404"	Small uppercase label above the headline.
heading	string	"We can't find that page"	Oversized light headline.
description	string	none	Short supporting copy under the headline.
image	MediaSlotImage	none	Background image for the tile the search panel floats on.
searchPlaceholder	string	"Search for what you need..."	Placeholder text for the search input.
onSearch	(query: string) => void	none	Called with the current input value when the search form is submitted.
destinations	Destination[]	none	Likely destinations listed in the two-column list below.
className	string	none	Extra classes for the outer section element.

Types

type Destination = { label: string; href: string };

Behavior notes

The search input is real controlled client state (useState); submitting the form calls the onSearch prop with the current query. It defaults to a no-op, so the block works fully with no wiring.
The floating search panel sits on a static background image (MediaSlot); it has no relation to the image content itself.
The two-column destination list underneath renders as real Next.js Links via `href`, but is otherwise static, nothing is fetched or ranked live.

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.