System Pages

A collection of modern and engaging system pages like 404 & Error.

Installation

Quick guide to setup the component

1. Copy and paste this into the terminal to install the required dependencies.

Terminal

Copied!

npm i motion clsx tailwind-merge react-icons

2. Create /lib folder, then create the file utils.ts. Copy and paste this inside of it.

lib/utils.ts

Copied!

1import { ClassValue, clsx } from "clsx";
2import { twMerge } from "tailwind-merge";
3 
4export function cn(...inputs: ClassValue[]) {
5  return twMerge(clsx(inputs));
6}

Matrix 404

Matrix theme 404 not found page with digital rain animation.

404

The Matrix has you... Page not found.

Return to Reality

Animated 404

Interactive 404 page with grid background, mouse tracking, and dark mode support.

404

Page Not Found

Looks like this page decided to go on an adventure without us

Take me home

Simple 404

Clean and modern 404 not found page with illustration.

Oops! We Can't Seem to Find That Page.

The page you're looking for might have been moved, deleted, or never existed.

404 Illustration

More Components Coming Soon

We're constantly adding new components to help you build faster.

More coming soon! 🚀

Have a specific component in mind? I'd love to build it for you.

Request a component →
DPS TemplateDPS Template

Component Development

Need custom React components for your project? Get in touch

I've built hundreds of components, and helped developers and teams create beautiful, reusable UI components.

  • Custom React components withTypeScript support

  • Beautiful styling withTailwind CSS

  • Fully tested and documented components ready to use

Perfect for development teams, agencies, or anyone needing custom UI components.


Ready to enhance your component library?

Reach out to me →
DPS TemplateDPS Template
DP's Templates

Access an ever-growing collection of premium, meticulously crafted templates and component packs for modern web and mobile development. Built by Emanuele Di Pietro.