Does Not Found Spotlight 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 Spotlight

A 404 in the dark: a torch follows the pointer and lights up the number and lost pages scattered on the wall.

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

About Not Found Spotlight

Not Found Spotlight drops visitors into the dark: a torch follows the pointer and lights up the 404 painted on the wall, along with a few lost pages and oddities lying around.

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

When to use Not Found Spotlight

Brands with a sense of humour.
Dark-themed products.
Agency and portfolio sites.
Seasonal and Halloween pages.

How it is built

The wall is masked with a radial gradient whose centre follows the pointer on springs, so the light glides. With reduced motion the whole wall is visible, and the page title stays readable for screen readers.

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

Goes well with Not Found Spotlight

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 Magnetic: A React 404 page whose digits lean toward the cursor on springs
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 Spotlight

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

Not Found Spotlight 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 Spotlight 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 Spotlight as Markdown