Not Found

The 404, built on Empty State, not a copy of it: the compass star from the brand library, 404 above the title, the way home and, when there is one, a search. Its title is the page's h1. This site's own 404 page uses it.

Preview

The 404 — this site’s own (try any missing address)

404

This page is off the map

The link may be old, or the page has moved on. Head back to the start, or search for what you came for.

Back to the start Search everything

Its own words and drawing, for a missing place

No such place

Zobu couldn’t find that place

We’re live in 80+ destinations, but not this one — yet.

See every place

Usage

tsx

import { NotFound } from "zostel-ui";

// Next.js: app/not-found.tsx · Astro: src/pages/404.astro
export default function NotFoundPage() {
  return <NotFound searchHref="/search" />;
}

// your own words and drawing — everything EmptyState takes
<NotFound
  drawing={{ set: "kit", key: "one-zobu-trekking" }}
  title="Zobu couldn't find that place"
  homeHref="/destinations"
  homeLabel="See every place"
/>

Props

Prop	Type	Default	Description
`homeHref`	`string`	`"/"`	Where home is.
`homeLabel`	`ReactNode`	`"Back to the start"`	What the home button says.
`searchHref`	`string`	—	A search page, for a second (Beige) button. None when left out, and the line stops asking you to search.
`searchLabel`	`ReactNode`	`"Search everything"`	What the search button says.
`drawing`	`BrandDrawing`	`{ set: "kit", key: "compass-star" }`	The drawing, by key (as EmptyState).
`pattern`	`PatternKey \| false`	`"jaali"`	The pattern on the plate behind the drawing: jaali, the Zostel symbol’s own 60° lattice. false = no plate.
`eyebrow`	`ReactNode`	`"404"`	The small line above the title.
`title`	`ReactNode`	`"This page is off the map"`	The headline.
`body`	`ReactNode`	—	The line under it: the link may be old, or the page has moved on.
`size`	`"sm" \| "md" \| "lg"`	`"lg"`	As EmptyState.
`titleAs`	`"h1" \| "h2" \| "h3" \| "h4" \| "p"`	`"h1"`	The title is the page’s h1, on a 404 page of its own.
`base`	`string`	`""`	Where the brand files live: "" is the same origin; a product app passes the brand site.
`className`	`string`	—	More classes, merged with the component’s own (tailwind-merge).

homeHref

Type: string

Default: "/"

Where home is.

homeLabel

Type: ReactNode

Default: "Back to the start"

What the home button says.

searchHref

Type: string

Default: —

A search page, for a second (Beige) button. None when left out, and the line stops asking you to search.

searchLabel

Type: ReactNode

Default: "Search everything"

What the search button says.

drawing

Type: BrandDrawing

Default: { set: "kit", key: "compass-star" }

The drawing, by key (as EmptyState).

pattern

Type: PatternKey | false

Default: "jaali"

The pattern on the plate behind the drawing: jaali, the Zostel symbol’s own 60° lattice. false = no plate.

eyebrow

Type: ReactNode

Default: "404"

The small line above the title.

title

Type: ReactNode

Default: "This page is off the map"

The headline.

body

Type: ReactNode

Default: —

The line under it: the link may be old, or the page has moved on.

size

Type: "sm" | "md" | "lg"

Default: "lg"

As EmptyState.

titleAs

Type: "h1" | "h2" | "h3" | "h4" | "p"

Default: "h1"

The title is the page’s h1, on a 404 page of its own.

base

Type: string

Default: ""

Where the brand files live: "" is the same origin; a product app passes the brand site.

className

Type: string

Default: —

More classes, merged with the component’s own (tailwind-merge).