Skip to content
caliper ui docs
DemoSign inGet Pro

Pro

Compass 404

A 404 with a compass in the middle and four places on its points. While nothing is chosen the needle hunts back and forth; hover or focus a place and it swings to it with a little overshoot.

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

Lost your bearings?

Error 404. This page isn't on the map. Pick a direction.

Installs components/ui/not-found-compass.tsxDepends on none beyond ReactMotion none in component source

When to use

Use it for

  • Sites with four clear sections.
  • Outdoor, travel and map products, or anyone who likes the idea.

Skip it when

  • More or fewer than four destinations.
  • Pages that need search; use the search 404.

Decisions

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

Behaviour

The short way round
The needle turns by the smaller angle, so going from north to west is a quarter turn back, not three quarters forward.

Usage

Links in reading order
North, east, south and west are ordinary links in that order; the dial and needle are hidden pictures.

Installation

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

Adds its 2 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.

example.tsx
import { NotFoundCompass } from "@/components/ui/not-found-compass"

The worked example comes with Pro

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

NotFoundCompass

component
PropTypeDefaultDescription
points *readonly [CompassPoint, CompassPoint, CompassPoint, CompassPoint]—North, east, south and west, in that order.
titlestring"Lost your bearings?"
descriptionstring"This page isn't on the map. Pick a direction."
actionsReactNode—
classNamestring—

Accessibility

It is built on native elements and keeps aria-label and aria-hidden in step with state.

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

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