Skip to content
caliper ui docs
DemoSign inGet Pro

Pro

Search 404

A 404 that is a search. The field opens filled with the words of the address that failed, so the likely pages are listed before anything is typed, and results move into their new order as you type, forgiving a typo per word.

Pro
pnpm dlx shadcn@latest add @caliper/not-found-search

404

Let's find it another way

Error 404. Nothing lives at /blog/motoin-tips. We searched for its words instead.

  • Motion tips for product UIDurations, easing and when not to animate/blog/motion-tips
  • MotionThe motion tiers and reduced motion/docs/motion
  • Designing dense tablesRows people can scan/blog/dense-tables

3 pages match

Installs components/ui/not-found-search.tsxDepends on lucide-reactMotion none in component source

When to use

Use it for

  • Content sites, docs and help centres with many pages.
  • Sites where old links break often after a move.

Skip it when

  • Sites with a handful of pages; link them directly.
  • Apps where the search would leak private page titles to signed-out visitors.

Decisions

Why it is built this way, so you know what to keep when you change your copy.

Behaviour

Starts with an answer
pathQuery turns the failed address into words, so /blog/motoin-tips already lists the motion article before a key is pressed.
Forgiving, not fuzzy
searchPages matches each word exactly, by prefix, or with one slip (a letter or a swapped pair); titles weigh double.

Usage

A real combobox
Arrow keys move through a listbox, Enter opens the active result, and the count is announced as it changes.

Installation

terminal
pnpm dlx shadcn@latest add @caliper/not-found-search

Adds its 5 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage

Import it from your copy of the source. The example behind the preview comes with the source. It is built from NotFoundSearch, searchPages and pathQuery.

example.tsx
import { NotFoundSearch, searchPages, pathQuery } from "@/components/ui/not-found-search"

The worked example comes with Pro

The 42-line example behind the preview opens here, ready to copy.

  • 576 Pro parts, blocks and page templates, all with source
  • $199 once, with a year of updates. What you have stays yours
  • A full refund within 14 days if it is not for you
Checking your licence…

API reference

NotFoundSearch

component
PropTypeDefaultDescription
path *string—
pages *readonly SearchPage[]—
onNavigate *(href: string) => void—Called with a page's href; usually your router's push.
titlestring"Let's find it another way"
actionsReactNode—
classNamestring—

searchPages

component

No props of its own; it accepts the native props of its root element.

pathQuery

component

No props of its own; it accepts the native props of its root element.

Accessibility

It exposes combobox, listbox, option and status semantics, with aria-hidden, aria-expanded, aria-controls, aria-activedescendant, aria-autocomplete and aria-label kept in step with state. Changes that matter are announced through a live region.

KeyBehaviour
↓Moves to the next item or value.
↑Moves to the previous item or value.
EnterActivates the focused control.

Motion

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.

All Pages examples