shadcn.io is not affiliated with official shadcn/ui
Page History Trail 404 Error Block for React Aria
A full-height 404 page for a design-review tool that shows the trail of pages you visited on a rail-to-rail rule, tags the last good page, and lets you clear and restore the trail.
Installation
Overview
Tell a lost visitor where they have been, with this 404 block for React with React Aria. It's the not-found page of Critlane, a design-review tool: the page's rails run its full height and one band crosses the screen between two rules with a plus mark at each end. In the band the numerals, the heading, one sentence and a Shine Button link back to the last good page ("Back to Comments"), the only colored control, come first. Under them a second ruled band runs from rail to rail with a plus mark at each end, and the trail stands on its rule: four stops (Projects, the Q4 launch board, Export, Comments) as links with their addresses, the last good page tagged "Last good page" in a Badge, and the missing page as a dashed ring. "Clear this trail" empties it and says nothing is kept in this browser; the same button then restores it. On a phone the trail is a vertical list. It's built from Shine Button, Button, Badge and Guides, with a CSS entrance only. For any app where people move through several pages before one goes missing.
FAQ
Where does the trail come from?
In the demo it's typed: TRAIL lists four pages and MISSING the address that failed. A page can't read the browser's history entries, only how many there are, so in your app keep the trail yourself: for example the last few routes your router visited, in memory or in session storage, passed in here. document.referrer gives only the one page before, and only when the browser sends it.
What do Clear this trail and Restore trail do?
Clear hides the trail and shows "Your trail is empty. Nothing is kept in this browser", a polite status line says the same, and the way back changes to "Go to Projects" because the last good page is no longer known. The same button, now labelled Restore trail, puts the typed trail back. Both states share one space, so the band never changes height, and focus stays on the button.
Why is the last good page the way back?
The page before the failure is the one most likely to hold what the visitor was doing: here they went from Export to Comments, then followed a link to a comment thread that has been deleted. So "Back to Comments" is the first control in the tab order, and Comments carries the words "Last good page", not only a filled dot. The missing page is a dashed ring and not a link, since there is nothing to open.
What stays local, and how do I wire the links?
Every link goes to #: point each stop at its real route. Clearing and restoring only change the page's state; nothing is stored and nothing leaves the page. The 404 status is your server's job, so render the page from your framework's not-found route.
Is the trail accessible?
It's an ordered list named "Pages you visited, oldest first", each stop a link with its name and its address, which stays left to right in a right-to-left page. The dots and the hairline are decoration. The missing page is read as "This page, not found" with its address. Clearing the trail is announced in a polite status line.