Catalog npm
Back to packageRELEASE DETAILS

1.0.1

npm

404-creator

Generate beautiful 404 pages with animations in one line!

404animationerror-pageui
Published3 Jun 2025
Direct dependencies0
Transitive dependenciesNot calculated

README

Current package documentation

404-Creator 🚀

npm license downloads

A zero-dependency package to generate beautiful, animated 404 pages with one line of JavaScript! Perfect for React, Vue, Next.js, and plain HTML projects.

Features ✨

  • 🎨 4 built-in color themes (purple, blue, red, green)
  • 🕹️ 3 animation types (floating, glitch, pulse)
  • 📱 Fully responsive
  • 🚫 No dependencies
  • ⚡ Under 2KB gzipped

Installation 📦

npm install 404-creator
# or
yarn add 404-creator
# or
pnpm add 404-creator

Basic Usage 🛠️

import { create404 } from "404-creator";

// Minimal usage (default styling)
create404();

// With custom options
create404({
  title: "Oops! Lost in Space",
  message: "This page doesn't exist in our universe",
  animation: "glitch",
  color: "blue",
});

Advanced Options ⚙️

OptionTypeDefaultDescription
titlestring"404 - Page Not Found"Main heading text
messagestring"The page you're looking for doesn't exist."Subtitle text
animation"floating" | "glitch" | "pulse""floating"Animation style
color"purple" | "blue" | "red" | "green""purple"Color theme

Framework Examples 🖇️

React Example

import { useEffect } from "react";
import { create404 } from "404-creator";

function NotFoundPage() {
  useEffect(() => {
    create404({
      title: "React 404",
      animation: "pulse",
    });
  }, []);

  return null; // This will replace the entire page
}

Next.js API Route

import { create404 } from "404-creator";

export default function Custom404() {
  if (typeof window !== "undefined") {
    create404();
  }
  return null;
}

Custom Styling 🎨

You can override the default styles by adding your own CSS:

.container {
  font-family: "Comic Sans MS", cursive;
}

.home-link {
  background: #ff5722 !important;
}

📝 License

This project is licensed under the MIT License.

📣 Author

Made with ❤️ by Manindra Bollam(manindra810@gmail.com)

Downloads & popularity

Awaiting observations

No metric observations yet

Download counts and popularity will appear here as the collector receives them.

Declared dependencies 0

Native requirements
0 direct targetsNot calculated transitive count
No declared dependencies in this collected response

Declarations describe requirements; they are not a resolved dependency graph.

Distribution files

1 collected
Distribution 1

Source distribution

Source file
Checksums from source
{
  "integrity": "sha512-8LofFuYmOc5hD/7Yvd+UYr7Cy7u7alagesD+DW1R2JYXEUtbdJ8BPzd26T8mSi7fx4YE+aRxr8PUgjrnlYvmAA==",
  "shasum": "383edd42b023f7cda1631ae2462a636b08a4059d",
  "tarball": "https://registry.npmjs.org/404-creator/-/404-creator-1.0.1.tgz",
  "fileCount": 3,
  "unpackedSize": 5008,
  "signatures": [
    {
      "keyid": "SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U",
      "sig": "MEUCIQCrCpJR82BfwjD9fxbISNybc4guoMgb8tbRtp+vfgYS6AIgRwETXwCOBYo5aWP6NHoQ4Wy5fZNGiSkD65w14Gb+By0="
    }
  ]
}

Metadata history

Meaningful changes
Current collected state Current

Observed since 20 Oct, 19:58 UTC

No superseded metadata states collected. Unchanged observations do not create new revisions.

Record identity

package_version:3fb33703b9dc85ab8334f3fe6dafff719ada6e6ddf62ca6984db47a8f9e29029

Other collected versions

1.0.03 JunView all collected versions →