Not found page

Block

A friendly 404 with suggestions and search.

Installs components/ui/not-found-page.tsxDepends on @radix-ui/react-slot, lucide-reactMotion none in component source

pnpm dlx shadcn@latest add https://caliperui.site/r/not-found-page.json

We can't find that page

Error 404. The link may be old, or the page may have moved. Here are some places to start.

When to use #

Use it for

A link is wrong or a page has moved.

Skip it when

The error is a server fault; say so plainly.

Installation #

terminal

pnpm dlx shadcn@latest add https://caliperui.site/r/not-found-page.json

Adds its 5 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above.

example.tsx

import { Button } from "@/components/ui/button"
import { NotFoundPage } from "@/components/ui/not-found-page"

export function NotFoundPageDemo() {
  return (
    <NotFoundPage
      actions={<Button>Go home</Button>}
      suggestions={[{ label: "Documentation", href: "/docs", description: "Guides and reference" }, { label: "Pricing", href: "/pricing" }]}
      onSearch={() => {}}
    />
  );
}

API reference #

NotFoundPage

component

PropTypeDefaultDescription

codestring"404"

titlestring"We can't find that page"

descriptionstring"The link may be old, or the page may have moved. Here are some places to start."

actionsReactNode—Usually a primary "Go home" button and a quiet "Go back".

suggestionsreadonly { label: string; href: string; description?: string | undefined; }[]—

onSearch((query: string) => void)—Adds a search field; called with the query.

classNamestring—

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.