@kripa006/404-ui

Open-source animated 404 error pages for React, Vue, and vanilla JavaScript.

Documentation · Gallery · GitHub · Report Bug

🖼️ Gallery

Four handcrafted templates, each shipping today for React, Vue, and Vanilla JS. Click any thumbnail to open the live demo.

✨ Features

• 🎨 Four animated templates — Space, Glitch, Ocean, Forest. All shipping today.
• ⚡ First-class React, Vue 3, and vanilla JS entry points with the same prop API.
• 🎯 TypeScript first — full type definitions for every component and prop.
• 📦 Tree-shakable subpath imports per framework.
• 🌐 SSR-safe — no window / document access at module load. Works with Next.js, Nuxt, Astro, Remix.
• 🌈 Tailwind powered, themeable via CSS variables and the exported theme tokens.
• ♿ Accessible by default — semantic headings, prefers-reduced-motion respected.

🚀 Install

npm install @kripa006/404-ui
# or: pnpm add / yarn add

Import the styles once at the entry of your app:

import "@kripa006/404-ui/styles.css";

🎨 Available templates

All four templates ship today across React, Vue, and Vanilla.

| Template | Component / Factory | Theme | | -------------- | ------------------------------- | ---------------------------------------------------------------------------- | | Space 404 | Space404 · createSpace404 | Apollo-era mission-control console with CRT phosphor, telemetry, easter eggs | | Glitch 404 | Glitch404 · createGlitch404 | Corrupted broadcast feed — chromatic aberration, sync-bar tear, NO SIGNAL | | Ocean 404 | Ocean404 · createOcean404 | Bioluminescent deep-sea drift with bubbles, jellyfish, sonar ping | | Forest 404 | Forest404 · createForest404 | Old-growth rainforest at twilight — drifting fog, fireflies, falling leaves |

🧩 Per-template snippets

Each template has the same prop shape across React, Vue, and Vanilla. Expand a template to see all three.

React

import { Space404 } from "@kripa006/404-ui/react";

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

Vue

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

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

Vanilla JS

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

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

// space404.destroy(); // call when unmounting

React

import { Glitch404 } from "@kripa006/404-ui/react";

export default function NotFound() {
  return (
    <Glitch404
      title="404"
      eyebrow="Transmission interrupted"
      headline="Page corrupted"
      subtitle="The signal carrying this page has been lost in transit."
      buttonText="Retune"
      channelId="04"
      onButtonClick={() => (window.location.href = "/")}
    />
  );
}

Vue

<script setup>
import { Glitch404 } from "@kripa006/404-ui/vue";
</script>

<template>
  <Glitch404
    title="404"
    eyebrow="Transmission interrupted"
    headline="Page corrupted"
    subtitle="The signal carrying this page has been lost in transit."
    button-text="Retune"
    channel-id="04"
    @button-click="$router.push('/')"
  />
</template>

Vanilla JS

import { createGlitch404 } from "@kripa006/404-ui/vanilla";

const glitch404 = createGlitch404(document.getElementById("app"), {
  title: "404",
  eyebrow: "Transmission interrupted",
  headline: "Page corrupted",
  subtitle: "The signal carrying this page has been lost in transit.",
  buttonText: "Retune",
  channelId: "04",
  onButtonClick: () => (window.location.href = "/"),
});

// glitch404.destroy();

React

import { Ocean404 } from "@kripa006/404-ui/react";

export default function NotFound() {
  return (
    <Ocean404
      title="404"
      eyebrow="Signal lost · 11,034m"
      subtitle="You've drifted too deep. The surface is waiting."
      buttonText="Return to surface"
      bubbleCount={28}
      onButtonClick={() => (window.location.href = "/")}
    />
  );
}

Vue

<script setup>
import { Ocean404 } from "@kripa006/404-ui/vue";
</script>

<template>
  <Ocean404
    title="404"
    eyebrow="Signal lost · 11,034m"
    subtitle="You've drifted too deep. The surface is waiting."
    button-text="Return to surface"
    :bubble-count="28"
    @button-click="$router.push('/')"
  />
</template>

Vanilla JS

import { createOcean404 } from "@kripa006/404-ui/vanilla";

const ocean404 = createOcean404(document.getElementById("app"), {
  title: "404",
  eyebrow: "Signal lost · 11,034m",
  subtitle: "You've drifted too deep. The surface is waiting.",
  buttonText: "Return to surface",
  bubbleCount: 28,
  onButtonClick: () => (window.location.href = "/"),
});

// ocean404.destroy();

React

import { Forest404 } from "@kripa006/404-ui/react";

export default function NotFound() {
  return (
    <Forest404
      title="404"
      eyebrow="Trail uncharted"
      headline="The path forks here."
      subtitle="You've wandered off the map. The grove is quiet — find your bearings and head back."
      buttonText="Find your bearings"
      coordinates="47°23′N · 122°02′W"
      onButtonClick={() => (window.location.href = "/")}
    />
  );
}

Vue

<script setup>
import { Forest404 } from "@kripa006/404-ui/vue";
</script>

<template>
  <Forest404
    title="404"
    eyebrow="Trail uncharted"
    headline="The path forks here."
    subtitle="You've wandered off the map. The grove is quiet — find your bearings and head back."
    button-text="Find your bearings"
    coordinates="47°23′N · 122°02′W"
    @button-click="$router.push('/')"
  />
</template>

Vanilla JS

import { createForest404 } from "@kripa006/404-ui/vanilla";

const forest404 = createForest404(document.getElementById("app"), {
  title: "404",
  eyebrow: "Trail uncharted",
  headline: "The path forks here.",
  subtitle:
    "You've wandered off the map. The grove is quiet — find your bearings and head back.",
  buttonText: "Find your bearings",
  coordinates: "47°23′N · 122°02′W",
  onButtonClick: () => (window.location.href = "/"),
});

// forest404.destroy();

Documentation

For full documentation, prop tables, theming, and the template gallery, visit https://kripa-sindhu-007.github.io/404_lib.

License

MIT