Skip to content
caliper ui docs
DemoSign inGet Pro

Pro

Orbit 404

A 404 where the zero is an empty orbit and the pages people usually want circle it as links, larger and in front on the near side, smaller and behind on the far side. Hovering or focusing stops the orbit so a link is easy to take.

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

This page drifted out of orbit

Error 404. We couldn't find what you were looking for. These are close by.

Installs components/ui/not-found-orbit.tsxDepends on lucide-reactMotion shared motion tokens

When to use

Use it for

  • A marketing or docs site with a handful of obvious destinations.
  • Brands that can carry a little play on an error page.

Skip it when

  • More than eight links; they crowd the ellipse.
  • Products where the error should feel serious, such as billing.

Decisions

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

Behaviour

Everything is said in text
Moving links stop under the pointer and on focus, and a pause button stops them for good. Below 520px they become a plain list. The heading, the reason and the links are ordinary text and links, so the page works with the art hidden.
Motion only when it is seen
The animation stops offscreen and under reduced motion, and never runs a timer while nothing is moving.

Usage

Point to real pages
Suggestions should be the pages people most often wanted from here, not a sitemap.

Installation

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

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.

example.tsx
import { NotFoundOrbit } from "@/components/ui/not-found-orbit"

The worked example comes with Pro

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

NotFoundOrbit

component
PropTypeDefaultDescription
codestring"404"
titlestring"This page drifted out of orbit"
descriptionstring"We couldn't find what you were looking for. These are close by."
links *readonly { label: string; href: string; }[]—Four to eight is right; each is a page people often want.
actionsReactNode—
classNamestring—

Accessibility

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

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