ComponentsSite blocks

404

A branded, useful not-found, error or maintenance page for not-found.tsx and error.tsx. No giant numerals: a small mono code, a sentence title as the page's h1, and the way back — popular pages, a plain GET search form and a phone line in the links variant. Works as a server component and inside error.tsx (client) with Next's reset().

blocks/site/not-found.tsx, blocks/site/registry-2.tstheme · material · accent · density · font

Error 404

This page moved, or never existed.

The link may be old or mistyped. Try the pages below, or search the site.

Back to home

Installation

$ pnpm add @vamos-ui/react

The whole kit as one package — get updates by bumping the version. Add the styles to globals.css: @import "@vamos-ui/react/styles.css";

Usage

import { NotFound } from "@vamos-ui/react/blocks";

// app/not-found.tsx
export default function NotFoundPage() {
  return <NotFound variant="links" links={popular} search={{ action: "/search" }} phone="+902160000000" />;
}

// app/error.tsx ("use client")
export default function Error({ reset }: { reset: () => void }) {
  return <NotFound kind="500" reset={reset} />;
}

Examples

Links, search and phone

Popular pages in a hairline list, a GET search form (works without JS), “Still stuck? Call …”.

Error 404

This page moved, or never existed.

The link may be old or mistyped. Try the pages below, or search the site.

Back to home

Still stuck? Call +90 216 000 00 00.

500 with reset, and maintenance

kind="500" adds “Try again” wired to reset; kind="maintenance" puts the phone number first.

Error 500

Something went wrong on our side.

The page didn’t load. It’s usually temporary — try again in a moment.

Back to home

Maintenance

We’ll be back shortly.

We’re updating the site. Bookings by phone work as usual.

Back to home +90 216 000 00 00

API

NotFound

Prop	Type	Default
`variant` Layout.	`"plain" \| "links"`	`"plain"`
`kind` Default code, title and text per kind.	`"404" \| "500" \| "maintenance"`	`"404"`
`title / text` Overrides; title supports one emphasis.	`ReactNode`	`—`
`links` Up to 6 popular pages (links variant).	`Link[]`	`—`
`homeHref` “Back to home”.	`string`	`"/"`
`search` GET search form (param default q).	`{ action; param? }`	`—`
`phone` Phone line / maintenance call button.	`string (E.164)`	`—`
`reset` error.tsx only: renders “Try again”.	`() => void`	`—`
`headingLevel` The title is the page's h1.	`1 \| 2 \| 3`	`1`
`labels / locale` Default copy in en / tr.	`Partial<Site2Labels> / string`	`—`
`theme / anchor / id / className / components / editMode` Shared block props.	`BlockBaseProps`	`—`

Navigation Menu

Notification center