Errors

Error Page

A full-page error state for 404, 500, or any custom error code. Ships with sensible default headlines and descriptions that can be overridden. Includes a back-home button and an optional illustration slot.

404

Page not found

Sorry, we couldn't find the page you're looking for. It may have been moved or deleted.

Go back home

import { ErrorPage } from "@aetherstack/blocks"

Installation

terminal

npx aether-ui add error-page

Import

import.tsx

import { ErrorPage } from "@aetherstack/blocks"

Usage

error-page.tsx

import { ErrorPage } from "@aetherstack/blocks"

// 404
export default function NotFound() {
  return (
    <ErrorPage
      code="404"
      backHref="/"
      backLabel="Go back home"
    />
  )
}

// 500
export function ServerError() {
  return (
    <ErrorPage
      code="500"
      backHref="/"
    />
  )
}

Props

Prop	Type	Default	Description
code	string	'404'	Error code displayed in large type. Supports '404', '500', or any string.
headline	string	—	Custom headline. Defaults to a preset for 404/500.
description	string	—	Custom description. Defaults to a preset for 404/500.
backHref	string	'/'	URL for the back link button.
backLabel	string	'Go back home'	Label for the back link button.
illustration	ReactNode	—	Optional illustration rendered above the error code.
className	string	—	Additional classes on the root element.

* Required

Accessibility

→The headline renders as an <h1>.
→The back button uses a plain <a> wrapped in Button asChild.