Search Led 404

A monochrome 404 screen anchored by a rounded search bar with a circular icon-only submit button, wired to a real onSearch callback. A ruled list of the site's most-travelled routes sits below 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/search-led-404.json

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

Usage

The file also exports error30Demo, 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 { Error30, error30Demo } from "@/components/blocks/error/error30";

export default function Page() {
  return <Error30 {...error30Demo} />;
}

Props

Prop	Type	Default	Description
eyebrow	string	"404"	Small uppercase label above the headline.
heading	ReactNode	none	Main headline; the demo embeds a muted emphasis clause after the lead sentence.
description	string	none	Short supporting copy under the headline.
searchPlaceholder	string	"Search for a page..."	Placeholder text for the search input.
onSearch	(query: string) => void	none	Called with the current input value when the search form is submitted.
routes	TravelledRoute[]	none	Most-travelled routes listed under the search bar.
className	string	none	Extra classes for the outer section element.

Types

type TravelledRoute = { 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 route list underneath renders as real Next.js Links via each button's render prop, 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.