Plain light 404 with no artwork: centered eyebrow, headline and description, a primary back-home button and a contact-support link with a trailing arrow.
import { ArrowRightIcon } from "@phosphor-icons/react/dist/ssr"
import { cn } from "cn"
import { Eyebrow } from "@/components/editorial/eyebrow"
import { Heading } from "@/components/editorial/heading"
import {
Section,
SectionActions,
SectionDescription,
SectionHeader,
SectionTitleGroup,
} from "@/components/editorial/section"
import { buttonVariants } from "@/components/ui/button"
// The copy: change text here, not in the markup.
const COPY = {
eyebrow: "404",
title: "Page not found",
body: "There is nothing at this address. Check the link, or start again from home.",
} as const
const ACTIONS = {
home: { label: "Back to home", href: "/" },
support: { label: "Contact support", href: "/support" },
} as const
export default function MinimalNotFound01() {
return (
<Section size="lg" className="flex min-h-svh flex-col justify-center">
<SectionHeader align="center" size="lg">
<SectionTitleGroup>
<Eyebrow>{COPY.eyebrow}</Eyebrow>
<Heading render={<h1 />} size="lg">
{COPY.title}
</Heading>
</SectionTitleGroup>
<SectionDescription size="lg">{COPY.body}</SectionDescription>
</SectionHeader>
<SectionActions align="center">
<a
href={ACTIONS.home.href}
data-slot="button"
className={cn(buttonVariants({ size: "lg" }))}
>
{ACTIONS.home.label}
</a>
<a
href={ACTIONS.support.href}
data-slot="button"
className={cn(buttonVariants({ variant: "link", size: "lg" }))}
>
{ACTIONS.support.label}
<ArrowRightIcon
weight="light"
data-icon="inline-end"
aria-hidden="true"
/>
</a>
</SectionActions>
</Section>
)
}
pnpm dlx shadcn add @01orbital/minimal-404-01npx shadcn add @01orbital/minimal-404-01yarn shadcn add @01orbital/minimal-404-01bunx --bun shadcn add @01orbital/minimal-404-01Free under the MIT license. Add the @01orbital registry to components.json once (install guide), then run the command.
It lands at components/blocks/404/minimal-404-01/index.tsx, as source you own and edit.
import MinimalNotFound01 from "@/components/blocks/404/minimal-404-01"
export default function Example() {
return <MinimalNotFound01 />
}npm: @phosphor-icons/react, cn. The CLI installs them for you.
Registry pieces it installs with it:
Light Not Found with Orb
Centered light 404 with a HorizonDisc orb above the error code, a one-line headline and a single back-home button with a leading arrow. No description line, no background art.
Neon Numeral Not Found
Dark 404 that spells the code in neon: two NeonFour tubes around a NeonOrb, with a visually hidden heading, one line of copy and a button. The orb's flicker is off until you opt in.