404 With Popular Articles
404
This article is not here
The post you followed was unpublished or its address changed. These are the ones people are reading today.
Most read this week
404
The post you followed was unpublished or its address changed. These are the ones people are reading today.
Most read this week
Blog 404 that turns a dead post URL into reading: centered messaging above a three-up article grid with cover images, category badges, dates, and read times.
A blog 404 that turns a dead post URL into reading: centred messaging above a three-up article grid with cover images, category badges, dates and read times, closing with a browse-everything button.
Upgrade to Pro
Pro blocks install through the shadcn CLI with your license key and ship their full source. Docs and live previews stay open to everyone, so you can read every block's details first.
Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.
Radix flavor
npx shadcn add "https://ui.beste.co/r/error12?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/error12?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/error12.tsx, plus the badge and button shadcn/ui primitives it uses for the category chips and the closing action.
The installed file exports error12Demo alongside the block: the exact props behind the preview above. Spread it to get a working blog 404 in one line.
import { Error12, error12Demo } from "@/components/beste/block/error12";
export default function NotFound() {
return <Error12 {...error12Demo} />;
}Then pass your own posts. Every field except title, href and image is optional:
import { ArrowRight } from "lucide-react";
import { Error12 } from "@/components/beste/block/error12";
export default function NotFound() {
return (
<Error12
code="404"
heading="This article is not here"
description="The post you followed was unpublished or its address changed."
articlesLabel="Most read this week"
articles={[
{
title: "Shipping a design system without a design team",
category: "Engineering",
date: "Jul 18, 2026",
readTime: "6 min read",
href: "/blog/design-system",
image: { src: "/images/design-system.jpg", alt: "Code on a laptop screen" },
},
{
title: "What we learned rebuilding onboarding twice",
category: "Product",
date: "Jul 11, 2026",
href: "/blog/onboarding",
image: { src: "/images/onboarding.jpg", alt: "Analytics dashboard" },
},
]}
buttons={[{ label: "Browse all posts", href: "/blog", icon: ArrowRight }]}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
code | string | – | Small uppercase status label above the heading |
heading | string | – | Main page heading, rendered as an h1 |
description | string | – | Explanatory paragraph under the heading |
articlesLabel | string | – | Caption above the article grid |
articles | ArticleItem[] | [] | Posts shown in the grid |
buttons | ActionButton[] | [] | Centred action row below the grid |
className | string | – | Extra classes for the outer <section> |
type ArticleItem = {
title: string;
category?: string;
date?: string;
readTime?: string;
href: string;
image: { src: string; alt: string };
};
type ActionButton = {
label: string;
href: string;
variant?: "default" | "outline" | "secondary" | "ghost";
icon?: LucideIcon;
};16:10 aspect box with object-cover and scale to 105% over 500ms on hover through the named group/error12 group.date and readTime it inserts a middot separator, with only one of them it prints that value alone, and with neither the line is skipped.md breakpoint up, so a three-item demo fills one row exactly.h2 elements under the page h1, which keeps the document outline correct when the block is the only content on the page.error1
Minimal centered 404 page with a large error code, a heading, a short explanation, two call-to-action buttons, and a divided row of popular page links underneath.
error32
Monochrome 404 for a renamed article: a display headline and pill call to action above three recent entries, each a full-colour image tile with a plain date line and a bold title.
error13
404 page that doubles as a sitemap: left-aligned messaging over four columns of grouped section links, so visitors on a large site can jump straight to the area they wanted.
error11
Store 404 for dead product URLs: the message and shopping buttons sit above a four-up product grid with square imagery, prices, and optional strikethrough compare-at prices.