Staaarter

404 Support Panel

A card-style 404 panel: an icon badge and heading, the requested URL echoed back in monospace, a real browser-history back button paired with a homepage link, and a closing row of support and status links.

By Staaarter Team
Error
Docs
Live preview

Docs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/404-support-panel.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/error/error5.tsx instead.

Usage

The file also exports error5Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Error5, error5Demo } from "@/components/blocks/error/error5";

export default function Page() {
  return <Error5 {...error5Demo} />;
}

Props

PropTypeDefaultDescription
headingstring"This page isn't available"Card heading.
descriptionstring"The link you followed may be broken, or the page may have been removed."Short explanation under the heading.
requestedPathstring"/products/wireless-headphones-v2"URL path echoed back in the monospace panel.
homeHrefstring"/"Link target for the homepage button.
homeLabelstring"Go to homepage"Label for the homepage button.
supportHrefstring"/support"Link target for the support link.
supportLabelstring"Contact support"Label for the support link.
statusHrefstring"/status"Link target for the status link.
statusLabelstring"System status"Label for the status link.
classNamestringnoneExtra classes for the outer section element.

Behavior notes

  • "Go back" is a real handler: it calls window.history.back() to navigate the browser's actual history, unlike every other button/link in this block.
  • "Go to homepage", "Contact support", and "System status" are decorative Next.js Links via the button's render prop, pointing wherever their href props say.
  • requestedPath is a plain string prop, not the current browser URL, so the panel always shows whatever path you pass it.