Skip to content
caliper ui docs
DemoSign inGet Pro

Pro

Departure board 404

A 404 set as a departures board. The top row flaps from the requested address to NOT FOUND, and the rows under it are the places people usually go, each a link with its own gate.

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

This flight has been cancelled

Error 404, no page at /pricng. The page you were heading to isn't here. These are boarding now.

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

When to use

Use it for

  • Travel, logistics and playful consumer brands.
  • Sites with four to six obvious destinations.

Skip it when

  • Serious contexts such as billing or health.
  • Long lists; the board is for a few rows.

Decisions

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

Behaviour

The flaps run once
Each cell cycles to its letter and stops; nothing loops. Reduced motion shows the board settled.

Usage

Rows are links
Each destination is a whole-row link, its gate decorative, so the board reads as a plain list of places.

Installation

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

Adds its 3 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 { NotFoundBoard } from "@/components/ui/not-found-board"

The worked example comes with Pro

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

NotFoundBoard

component
PropTypeDefault
path *string—
destinations *readonly BoardDestination[]—
titlestring"This flight has been cancelled"
descriptionstring"The page you were heading to isn't here. These are boarding now."
actionsReactNode—
classNamestring—

Accessibility

It is built on native elements and keeps aria-hidden and aria-label 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