Skip to content
Aback UI

Block ยท Application

Not found

A 404 page with a way forward: home, an alternative, and the destinations people usually want.

Beta2 componentsRegistry JSON (opens in a new tab)
the Not found preview in a new tab

Desktop at 1280 pixels. The frame scrolls when the block is taller than 900 pixels. Example data is labelled inside the preview.

Installation

One item installs the block and every component it imports.

npx aback-ui@latest add not-found

The block lands at components/blocks/not-found.tsx. First time in this project? Run npx aback-ui@latest init first, as the installation guide shows. Blocks are copied with the CLI; they are not part of the npm package.

Built from

The registry installs these components with the block.

What to customize

  • Render it from your framework's not-found route so the response is a real 404, not a 200 with an error message.
  • Fill links from your analytics: the pages people were most likely looking for.
  • Only pass searchHint if your site actually has search and the shortcut works.

Accessibility

  • The block renders the page's h1, so the page is announced as "Page not found".
  • Every way forward is a real link with descriptive text.
  • The error badge is text, not an icon alone.