v0.1 · open source · MIT

The 404
component library.

A small, opinionated set of handcrafted not-found pages for React, Vue, and Vanilla JS. Drop one in, theme it, ship it. No purple-gradient clichés, no AI-slop.

Browse templates Quick start

Templates: 4 / growing
Frameworks: 3
Bundle (gzip): ~6 kB

Featured · Apollo404

running

Apollo404.tsx ● react · vue · js

01 — Apollo · mission control try ⇧ · type APOLLO

Templates: 4 / growing
Frameworks: 3
Bundle (gzip): ~6 kB

live preview

APOLLO-404.TSX ● running

⏎ try ⇧ · type APOLLO · click the craft Apollo 404

fig. 01 — Apollo 404, rendered live

Apollo 404 MISSION Ocean 404 DEEP SEA Glitch 404 RETRO Forest 404 NATURE Arcade 404 PIXEL Aurora 404 AMBIENT Apollo 404 MISSION Ocean 404 DEEP SEA Glitch 404 RETRO Forest 404 NATURE Arcade 404 PIXEL Aurora 404 AMBIENT

01 — what you get

Library-grade ergonomics. Without the ceremony.

01 f / 01

Drop-in components

One import per template. Sensible props. No setup wizards, no providers, no ‘just install these 12 packages first’.

02 f / 02

React · Vue · Vanilla

Three first-class entry points. Same prop API, same behavior, same bundle budget. Pick the one you ship.

03 f / 03

Tree-shakeable ESM

Subpath imports per framework. Only the template you use lands in your bundle — typically under 6 kB gzipped.

04 f / 04

Accessible by default

Real headings, focusable controls, prefers-reduced-motion respected, screen-reader-friendly status messages.

05 f / 05

Themeable via tokens

Each template exposes CSS variables for color, type, and timing. Override one value, restyle the whole template.

06 f / 06

Easter eggs included

Every template ships with small ungated delights — a key combo, a click sequence, a hidden console message.

02 — the catalogue

Four shipping today. More on the bench.

Open gallery

01 / live Apollo404

Apollo 404

<Space404 />

An Apollo-era mission-control console. CRT phosphor, telemetry rails, an orbital diagnostic, and an easter egg that launches when you type APOLLO.

mission-control
dark
animated
easter-eggs

Open demo Copy code

02 / live Ocean404

Ocean 404

<Ocean404 />

A bioluminescent deep-sea drift. Pop bubbles, watch a drifting jellyfish, follow a sonar ping. The Konami code summons a submarine.

ocean
dark
animated
easter-eggs

Open demo Copy code

03 / live Glitch404

Glitch 404

<Glitch404 />

A corrupted broadcast feed. Chromatic aberration, sync-bar tear, static-noise overlay, blinking NO SIGNAL. Type GLITCH for a meltdown.

cyberpunk
dark
animated
easter-eggs

Open demo Copy code

04 / live Forest404

Forest 404

<Forest404 />

An old-growth rainforest at twilight — drifting fog, swaying canopies, fireflies, falling birch leaves, and a wobbling ranger compass. Type MOSS for a spring bloom.

nature
dark
animated
easter-eggs

Open demo Copy code

Aurora 404

Slow gradient sweep · low-poly mountains

○ 05 · soon

03 — quick start

Three steps. Three frameworks.

Install once. Import the template you want. Hand it to your router's 404 boundary. That's it.

01
Install
npm i @kripa006/404-ui
02
Import

Pull a template from the framework subpath that matches your stack.
03
Ship

Render it from your router's catch-all route. Theme via CSS variables.

$ npm i @kripa006/404-ui

Or — pnpm add @kripa006/404-ui · yarn add @kripa006/404-ui

NotFound.tsx

// 1. Import
import { Space404 } from "@kripa006/404-ui/react";
import "@kripa006/404-ui/styles.css";

// 2. Render it
export default function NotFoundPage() {
  return (
    <Space404
      title="404"
      headline="OFF-NOMINAL TRAJECTORY DETECTED"
      subtitle="The page you requested drifted outside the envelope."
      buttonText="RE-VECTOR TO BASE"
      missionId="APOLLO · LM-404"
      onButtonClick={() => (window.location.href = "/")}
    />
  );
}

<script setup>
import { Space404 } from "@kripa006/404-ui/vue";
import "@kripa006/404-ui/styles.css";
</script>

<template>
  <Space404
    title="404"
    headline="OFF-NOMINAL TRAJECTORY DETECTED"
    subtitle="The page you requested drifted outside the envelope."
    button-text="RE-VECTOR TO BASE"
    mission-id="APOLLO · LM-404"
    @button-click="$router.push('/')"
  />
</template>

import { createSpace404 } from "@kripa006/404-ui/vanilla";
import "@kripa006/404-ui/styles.css";

const app = document.getElementById("app");

const space404 = createSpace404(app, {
  title: "404",
  headline: "OFF-NOMINAL TRAJECTORY DETECTED",
  subtitle: "The page you requested drifted outside the envelope.",
  buttonText: "RE-VECTOR TO BASE",
  missionId: "APOLLO · LM-404",
  onButtonClick: () => (window.location.href = "/"),
});

// space404.destroy(); // cleanup when unmounted

04 — the thinking

A 404 is the last page a user ever asks for. Make it count.

Design-forward

Each template has a point of view. No generic purple gradients. No stock emoji astronauts.

Framework-honest

React, Vue, and Vanilla get first-class treatment. Same API surface, same behavior, same bundle budget.

Hidden delights

Every template ships with small, ungated easter eggs. Reward the users who linger — they're the ones who remember.

Ship it

Your next 404 is one import away.

Four templates today. More on the way. Open an issue if you want one specific to your app — contributions welcome.

Browse templates Star on GitHub

The 404 component library.

Library-grade ergonomics. Without the ceremony.

Drop-in components

React · Vue · Vanilla

Tree-shakeable ESM

Accessible by default

Themeable via tokens

Easter eggs included

Four shipping today. More on the bench.

Apollo 404

Ocean 404

Glitch 404

Forest 404

Aurora 404

Three steps. Three frameworks.

Install

Import

Ship

A 404 is the last page a user ever asks for. Make it count.

Design-forward

Framework-honest

Hidden delights

Your next 404 is one import away.

The 404
component library.