When a page is not there: the code drawn huge, the bird that lost its way, one sentence, a search and the ways back — never a dead end.

WebBetaTemplates

Web only — React, from @krizaka/ui/error-page. Beta: its API may still change in a minor version.

When to use

When not to use

Install

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Import

import { ErrorPage } from "@krizaka/ui/error-page";

The pigeon, a search and three ways back.

The address may have changed. Search for it, or start again from one of these.

An error page: the code drawn, the bird, a sentence, a search and the ways back.

Prop	Type	Default	Description
`code`required	`string`	—	The code (`404`, `500`): drawn, not read — the title says it in words.
`title`required	`ReactNode`	—	The page's `h1` (`This page took another road`).
`actions`	`ReactNode`	—	The ways back (an ActionBar: home, the docs, contact).
`mascot`	`ReactNode`	—	The bird beside the code (a Mascot in its `empty` or `error` mood).
`search`	`ReactNode`	—	A search, to find what was meant.
`text`	`ReactNode`	—	What happened and what to do, in one or two sentences.

The title says it in words; the code is drawn, not read.
Offer a search and two or three ways back.
Words and content arrive as props; the motion is the platform's ([data-reveal], still under reduced motion).

Generated from the code of @krizaka/ui 2.10.0: its meta.ts, its examples and its types.Edit this documentation on GitHub