404 pageGlitch UINo props
A glitchy blue cyberpunk-inspired 404 page featuring animated distortion effects and bold typography.
Preview
Installation
1Run the following command in your terminal:
npm terminal
npx 404lab@latest add blueglitchThis will add the BlueGlitch component to your project automatically.
Usage
Import and render the component in your not-found.tsx file:
not-found.tsx
import BlueGlitch from "@/components/404/BlueGlitch"
export default function NotFoundPage() {
return Props
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | — | Additional CSS classes for styling the container. |
This component requires no props by default. Just drop it in and it works!
Features
Cyberpunk Aesthetics
Bold blue theme with neon-inspired glow and distortion.
Animated Glitch
Smooth CSS-driven glitch effects that feel alive.
Futuristic Typography
Clean, bold typeface that complements the digital look.
Minimalist Layout
Focuses entirely on the error message and aesthetic.
Lightweight
No heavy external libraries; purely performant CSS and React logic.