404 pageCreativeInteractive
A nostalgic MacOS terminal style 404 page. It features a draggable window, typewriting effect, and retro aesthetic.
Preview
Installation
1Run the following command in your terminal:
npm terminal
npx 404lab@latest add macosThis will add the MacOs component to your project automatically.
Usage
Import and render the component in your not-found.tsx file:
not-found.tsx
import MacOs from "@/components/404/MacOs"
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
Draggable Window
Fully interactive terminal window that can be moved around the screen.
Typewriter Effect
Dynamic animation for the error message, simulating a real terminal.
Interactive Controls
Functional window buttons that mimic the classic MacOS experience.
Retro Aesthetic
Carefully crafted styles that evoke nostalgia for classic computing.
Premium Polish
High-quality components with smooth transitions and consistent branding.