Day 26 of 365 · Free MIT Template

Error Pages Pack

Four production-ready error pages for Astro, Next.js, Remix, SvelteKit — or any static host. Drop them in your project, replace the home URL, done.

Each page is self-contained. No shared state, no JS required for the page itself. Per-page color variety is intentional — 404 is warm amber-on-dark, 500 is calm cream, Maintenance is clean slate, Offline is parchment-warm.

Error page previews

How to wire these into your project

Pick your framework. Each page is a standalone file — no shared config needed.

Astro

  1. 1. Copy src/pages/404.astro into your Astro project's src/pages/ directory.
  2. 2. Replace the "Go home" link href with your root URL.
  3. 3. Astro automatically serves 404.astro for unmatched routes on static deploys.

Next.js (App Router)

  1. 1. Create app/not-found.tsx (App Router) or pages/404.tsx (Pages Router).
  2. 2. Port the HTML structure and Tailwind classes — or just use the raw HTML from the static build.
  3. 3. For the 500 page, use error.tsx (App Router).

Static hosts (Netlify / Vercel / CF Pages)

  1. 1. Run npm run build to generate the static HTML files.
  2. 2. Copy the rendered dist/404/index.html into your host's custom error page slot.
  3. 3. For Netlify: rename to 404.html at the publish root.

Offline page (Service Worker)

  1. 1. Pre-cache the built offline/index.html in your service worker install step.
  2. 2. On fetch failure, serve the cached offline page from the SW.
  3. 3. The page also exists as a static fallback if your host supports custom offline pages.