404 Not Found
Error page layouts for when users land on a page that doesn't exist.
Minimal
Clean 404 with large number, message, and a single CTA.
html
<div class="uc-min-h-screen uc-bg-neutrals-background uc-flex uc-items-center uc-justify-center uc-p-4">
<div class="uc-text-center">
<p class="uc-font-bold uc-text-fg-disabled/20 uc-leading-none" style="font-size: clamp(8rem, 20vw, 16rem)">404</p>
<h1 class="uc-text-2xl uc-font-bold uc-mt-4">Page not found</h1>
<p class="uc-text-sm uc-text-fg-disabled uc-mt-2 uc-max-w-xs uc-mx-auto">The page you are looking for does not exist or has been moved.</p>
<a href="/" class="uc-btn uc-btn-primary uc-mt-8 uc-inline-flex">Go home</a>
</div>
</div>With Icon
Icon-based 404 with two CTAs — go back or go home.
html
Oops! Nothing here
Looks like this page took a wrong turn. Let us help you find your way back.
<div class="uc-min-h-screen uc-bg-neutrals-background uc-flex uc-items-center uc-justify-center uc-p-4">
<div class="uc-text-center">
<div class="uc-w-24 uc-h-24 uc-rounded-2xl uc-bg-tint-orange uc-flex uc-items-center uc-justify-center uc-mx-auto uc-mb-6">...</div>
<h1 class="uc-text-2xl uc-font-bold">Oops! Nothing here</h1>
<p class="uc-text-sm uc-text-fg-disabled uc-mt-2 uc-max-w-xs uc-mx-auto">Looks like this page took a wrong turn. Let us help you find your way back.</p>
<div class="uc-flex uc-gap-3 uc-justify-center uc-mt-8">
<button onclick="history.back()" class="uc-btn uc-btn-bordered">Go back</button>
<a href="/" class="uc-btn uc-btn-primary">Go home</a>
</div>
</div>
</div>With Search
404 with a search input and helpful navigation links.
html
<div class="uc-min-h-screen uc-bg-neutrals-background uc-flex uc-items-center uc-justify-center uc-p-4">
<div class="uc-text-center uc-w-full uc-max-w-md">
<p class="uc-font-bold uc-text-fg-disabled/20 uc-leading-none" style="font-size: clamp(6rem, 16vw, 12rem)">404</p>
<h1 class="uc-text-xl uc-font-bold uc-mt-4">Page not found</h1>
<p class="uc-text-sm uc-text-fg-disabled uc-mt-2">Try searching for what you need.</p>
<div class="uc-mt-6">
<input type="text" placeholder="Search..." class="uc-input" />
</div>
<div class="uc-flex uc-flex-wrap uc-gap-2 uc-justify-center uc-mt-6">
<a href="/" class="uc-text-sm uc-text-accents-blue">Home</a>
<span class="uc-text-fg-disabled">·</span>
<a href="/components" class="uc-text-sm uc-text-accents-blue">Components</a>
<span class="uc-text-fg-disabled">·</span>
<a href="/docs/introduction" class="uc-text-sm uc-text-accents-blue">Docs</a>
</div>
</div>
</div>API Reference
Utility classes used in 404 page layouts.
| Class | Type | Description |
|---|---|---|
uc-min-h-screen |
Layout | Full viewport height container |
uc-bg-neutrals-background |
Color | Page background |
uc-text-fg-disabled/20 |
Color | Large muted 404 number — low opacity foreground |
uc-bg-tint-orange |
Color | Warning/error tint for icon background |
uc-btn uc-btn-primary |
Primary "Go home" action | |
uc-btn uc-btn-bordered |
Secondary "Go back" action | |
uc-max-w-xs uc-mx-auto |
Container | Constrains description text width for readability |