Left-aligned light 404: eyebrow, headline and description start the column, and a flush arrow link leads home instead of a filled button. No artwork.
import { ArrowLeftIcon } 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.",
cta: "Back to home",
} as const
// The left-aligned 404: the header starts the column, the way home is a link.
export default function MinimalNotFound02() {
return (
<Section size="lg" className="flex min-h-svh flex-col justify-center">
<SectionHeader size="lg">
<SectionTitleGroup>
<Eyebrow>{COPY.eyebrow}</Eyebrow>
<Heading render={<h1 />} size="lg">
{COPY.title}
</Heading>
</SectionTitleGroup>
<SectionDescription size="lg">{COPY.body}</SectionDescription>
</SectionHeader>
<SectionActions>
<a
href="/"
data-slot="button"
className={cn(buttonVariants({ variant: "link" }), "px-0")}
>
<ArrowLeftIcon
weight="light"
data-icon="inline-start"
aria-hidden="true"
/>
{COPY.cta}
</a>
</SectionActions>
</Section>
)
}
pnpm dlx shadcn add @01orbital/minimal-404-02npx shadcn add @01orbital/minimal-404-02yarn shadcn add @01orbital/minimal-404-02bunx --bun shadcn add @01orbital/minimal-404-02Free 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-02/index.tsx, as source you own and edit.
import MinimalNotFound02 from "@/components/blocks/404/minimal-404-02"
export default function Example() {
return <MinimalNotFound02 />
}npm: @phosphor-icons/react, cn. The CLI installs them for you.
Registry pieces it installs with it:
Glowworm Cave Not Found
Dark 404 over a full-bleed GlowwormScene, with centered eyebrow, headline, a reassuring line and a wrapping home button. A legible text shadow keeps the copy readable over the art.
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.