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.
- 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 Spotlight: A dark React 404 page lit by a torch that follows the cursor
- Not Found Terminal: A React 404 page as a live terminal with help, ls, cd and home
Install Not Found Stacked
npx shadcn@latest add @charcoal/not-found-stackedNot 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.