Does Not Found Magnetic work with Next.js?

Yes. It is a React 19 component styled with Tailwind CSS 4, so it drops into a Next.js page, a Vite app, Remix or Astro.

Can I change the copy and colours?

Yes. The section is a file in your project. Text, links and images are plain props or JSX, and colours come from your theme's CSS variables, so a brand change is a token edit.

Not Found Magnetic

A 404 whose digits lean toward the pointer on their own springs, with a home button that pulls toward the cursor.

Type: Error section
Styles: Dark, Gradient
Licence: Charcoal UI Pro

About Not Found Magnetic

Not Found Magnetic makes a missing page playful: each digit of the 404 leans toward the pointer on its own spring, and the way home is a button that pulls toward the cursor too.

It is a full-width error section for React and Tailwind CSS 4, in a dark and gradient style. Preview it at any width above, then install it with one command.

When to use Not Found Magnetic

Consumer and creative brand 404s.
Portfolio sites.
Agency and studio websites.
Product launches with a playful tone.

How it is built

Each digit measures its distance to the pointer and leans in more the closer it is, with a heavier spring for each digit so they lag behind one another. Reduced motion keeps everything still.

It has no component dependencies beyond the shared utilities, so it is one file to read and change.

Goes well with Not Found Magnetic

Swap it with another error section, or browse the components it is built from.

Not Found Glitch: A React 404 page with a glitching number, colour ghosts and scanlines
Not Found Spotlight: A dark React 404 page lit by a torch that follows the cursor
Not Found Stacked: A React 404 page as a stack of notes with search and helpful links
Not Found Terminal: A React 404 page as a live terminal with help, ls, cd and home

Install Not Found Magnetic

npx shadcn@latest add @charcoal/not-found-magnetic

Not Found Magnetic is part of Charcoal UI Pro: one seat covers all 112 sections, 100 templates and 393 Pro components, for unlimited projects. The command installs the section into components/sections along with every component it uses.

Frequently asked questions

Does Not Found Magnetic work with Next.js?: Yes. It is a React 19 component styled with Tailwind CSS 4, so it drops into a Next.js page, a Vite app, Remix or Astro.
Can I change the copy and colours?: Yes. The section is a file in your project. Text, links and images are plain props or JSX, and colours come from your theme's CSS variables, so a brand change is a token edit.

Not Found Magnetic as Markdown