404 pageEducationalNo props
A clean and educational 404 page inspired by GeeksforGeeks, featuring a "Problem of the Day" style layout that effectively communicates the error in a familiar developer environment.
Preview
Installation
1Run the following command in your terminal:
npm terminal
npx 404lab@latest add geeksforgeeksThis will add the GeeksforGeeks component to your project automatically.
Usage
Import and render the component in your not-found.tsx file:
not-found.tsx
import GeeksforGeeks from "@/components/404/GeeksforGeeks"
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
GFG Aesthetic
Familiar green and white coding platform theme.
Problem Layout
Structured like a technical problem description.
Clean Typography
Optimized for readability and professional feel.
Responsive Design
Adapts perfectly to mobile and desktop screens.
Developer Focused
Specifically designed for technical audiences and coding blogs.