Not Found
404 not found page body: a centered code, a large balanced heading, an optional description and an actions row. Plain markup with no dependencies beyond cn, for a not-found route.
pnpm dlx shadcn add @01orbital/not-foundThe source comes with full access.
One payment of $149 opens the source right here and lets the CLI install every paid component, with lifetime updates.
The example also uses button. Install it too:
pnpm dlx shadcn add @01orbital/buttonnpx shadcn add @01orbital/buttonyarn shadcn add @01orbital/buttonbunx --bun shadcn add @01orbital/buttonUsage
import {
NotFound,
NotFoundActions,
NotFoundCode,
NotFoundDescription,
NotFoundTitle,
} from "@/components/hero/not-found"
import { buttonVariants } from "@/components/ui/button"
const COPY = {
title: "Page not found",
description: "Check the address, or head back home.",
action: "Back to home",
}
export default function NotFoundDemo() {
return (
<NotFound>
<div className="grid gap-3">
<NotFoundCode />
<NotFoundTitle>{COPY.title}</NotFoundTitle>
</div>
<NotFoundDescription>{COPY.description}</NotFoundDescription>
<NotFoundActions>
<a href="/" data-slot="button" className={buttonVariants()}>
{COPY.action}
</a>
</NotFoundActions>
</NotFound>
)
}Examples
New
not-found-missing-chapter
New
not-found-offset-frame
Anatomy
Not Found is built from 5 parts. In the example they nest like this:
NotFound
├─ NotFoundCode
├─ NotFoundTitle
├─ NotFoundDescription
└─ NotFoundActionsNotFound: A "404" block, centered: compose it fromNotFoundCode,NotFoundTitle, an optionalNotFoundDescriptionandNotFoundActions. Every part takesclassName.NotFoundCode: The status code above the title, 16px medium. Its children default to "404".NotFoundTitle: The page's headline, anh1at 36px, 48px from thesmbreakpoint.NotFoundDescription: A short line under the title, 16px with 28px lines, capped at 36rem.NotFoundActions: The block's buttons or links, centered in a row that wraps.
API reference
NotFound
A "404" block, centered: compose it from NotFoundCode, NotFoundTitle, an optional NotFoundDescription and NotFoundActions. Every part takes className.
It accepts the HTML attributes of the element it renders.
NotFoundCode
The status code above the title, 16px medium. Its children default to "404".
It accepts the HTML attributes of the element it renders.
NotFoundTitle
The page's headline, an h1 at 36px, 48px from the sm breakpoint.
It accepts the HTML attributes of the element it renders.
NotFoundDescription
A short line under the title, 16px with 28px lines, capped at 36rem.
It accepts the HTML attributes of the element it renders.
NotFoundActions
The block's buttons or links, centered in a row that wraps.
It accepts the HTML attributes of the element it renders.
Dependencies
npm: cn. The CLI installs them for you.
No other registry pieces.