Charcoal UI

Not Found Stacked

A 404 as a stack of notes you flick away: what happened, a search box, then the pages people usually want.

  • Type: Error section
  • Styles: Light, Minimal
  • Licence: Charcoal UI Pro

About Not Found Stacked

Not Found Stacked presents a missing page as a stack of paper notes: flick the top one away to see what happened, then a search box, then the pages people usually want.

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

When to use Not Found Stacked

  • Help centres and docs sites.
  • SaaS apps with deep links.
  • E-commerce stores.
  • Any 404 that should recover the visit.

How it is built

The top note is draggable and flies off past a distance or speed, and a Next button does the same from the keyboard. Notes under the top one are inert, so focus never lands on hidden content.

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

Goes well with Not Found Stacked

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

Install Not Found Stacked

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

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