Skip to content
caliper ui docs
DemoSign inGet Pro

Pro

Terminal 404

A 404 for developer products: a small terminal replays the failed request, names the page that was probably meant, then takes commands. Type a path to go there, Tab completes the closest, and ls lists the pages.

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

Nothing at this address

Error 404. There is no page at /docs/instalation. The closest is /docs/installation.

Installs components/ui/not-found-terminal.tsxDepends on none beyond ReactMotion shared motion tokens

When to use

Use it for

  • Developer tools, APIs and docs, where people mistype paths.
  • Any site with a known list of routes to match against.

Skip it when

  • Audiences who would not recognise a prompt; use the orbit or the plain page.
  • Very large sites; list the main sections, not every page.

Decisions

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

Behaviour

Did you mean, from edit distance
closestPath compares the request with your routes, ignoring case, query and trailing slash, and only suggests a route within a third of its length.
The replay never blocks
It types itself once; a click or reduced motion shows it whole, and the prompt appears when it is done.

Usage

Your router navigates
onNavigate receives the route's path, so it works with any router and with plain links.

Installation

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

Adds its 4 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 NotFoundTerminal and closestPath.

example.tsx
import { NotFoundTerminal, closestPath } from "@/components/ui/not-found-terminal"

The worked example comes with Pro

The 44-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

NotFoundTerminal

component
PropTypeDefaultDescription
path *string—The path that was requested.
routes *readonly TerminalRoute[]—
onNavigate *(path: string) => void—Called with a route's path; usually your router's push.
titlestring"Nothing at this address"
actionsReactNode—
hoststring"app"Shown in the prompt.
classNamestring—

closestPath

component

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

Accessibility

It exposes log semantics, with aria-hidden and aria-label kept in step with state. Changes that matter are announced through a live region.

No custom key handling; Tab and the native activation keys do the work.

Motion

Transitions use the shared duration and easing tokens. Under prefers-reduced-motion those tokens collapse to instant and travel distances go to zero, so state changes still happen without movement.

All Pages examples