Editorial 404 Section Index

An editorial-styled 404: a small eyebrow and status code sit over a hairline rule, above an oversized headline with one accent-highlighted word, followed by a ruled, divided index list of the sections visitors reach for next, each with a title, short description, and arrow.

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 dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/editorial-404-section-index.json

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

Usage

The file also exports error14Demo, 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 { Error14, error14Demo } from "@/components/blocks/error/error14";

export default function Page() {
  return <Error14 {...error14Demo} />;
}

Props

Prop	Type	Default	Description
eyebrow	string	"Error"	Small label at the left of the hairline rule.
statusCode	string	"404"	Status code shown at the right of the hairline rule.
heading	ReactNode	Every path leads <span className="text-primary">somewhere</span>.	Oversized headline. Accepts JSX so one word can be wrapped for the accent-color highlight.
description	string	"This one just doesn't exist. Here's where readers usually go next."	Short supporting copy under the heading.
sections	Error14Section[]	none	Rows in the ruled index list of sections.
className	string	none	Extra classes for the outer section element.

Types

interface Error14Section {
  title: string;
  description: string;
  href: string;
}

Behavior notes

Every row in the index list renders as a real Next.js Link component, but all default to "#" until you supply your own hrefs, nothing is submitted anywhere.

More Error Blocks

View all →

centered-404-message

Centered 404 Message

Minimal centered 404 with two CTAs and a divided row of popular page links.

404-with-site-search

404 With Site Search

404 screen with a working search box and a bordered list of suggested pages.

split-404-with-image

Split 404 With Image

Two-column 404 with the message on one side and a full-bleed photo that scales on hover on the other.

404-with-destination-cards

404 With Destination Cards

404 screen with a grid of icon destination cards plus fallback CTA buttons.

404-support-panel

404 Support Panel

Card-style 404 echoing the requested URL, with a real back button and a support/status link row.

inline-404-line

Inline 404 Line

The smallest possible 404: code and message on one divided line with one button underneath.