v1.0.0

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

404

Page not found

The page you are looking for does not exist or has been moved.

Go home 
<div class="vt-min-h-screen vt-bg-surfaces-background vt-flex vt-items-center vt-justify-center vt-p-4">
  <div class="vt-text-center">
    <p class="vt-font-bold vt-text-mains-quaternary/20 vt-leading-none vt-inline-6268fbcf32">404</p>
    <h1 class="vt-text-2xl vt-font-bold vt-mt-4">Page not found</h1>
    <p class="vt-text-sm vt-text-mains-quaternary vt-mt-2 vt-max-w-xs vt-mx-auto">The page you are looking for does not exist or has been moved.</p>
    <a href="/" class="vt-btn vt-btn-primary vt-mt-8 vt-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.

Go home 
<div class="vt-min-h-screen vt-bg-surfaces-background vt-flex vt-items-center vt-justify-center vt-p-4">
  <div class="vt-text-center">
    <div class="vt-w-24 vt-h-24 vt-rounded-2xl vt-bg-warning-background vt-flex vt-items-center vt-justify-center vt-mx-auto vt-mb-6">...</div>
    <h1 class="vt-text-2xl vt-font-bold">Oops! Nothing here</h1>
    <p class="vt-text-sm vt-text-mains-quaternary vt-mt-2 vt-max-w-xs vt-mx-auto">Looks like this page took a wrong turn. Let us help you find your way back.</p>
    <div class="vt-flex vt-gap-3 vt-justify-center vt-mt-8">
      <button onclick="history.back()" class="vt-btn vt-btn-bordered">Go back</button>
      <a href="/" class="vt-btn vt-btn-primary">Go home</a>
    </div>
  </div>
</div>

With Search

404 with a search input and helpful navigation links.

html

404

Page not found

Try searching for what you need.

Home · Components · Docs 
<div class="vt-min-h-screen vt-bg-surfaces-background vt-flex vt-items-center vt-justify-center vt-p-4">
  <div class="vt-text-center vt-w-full vt-max-w-md">
    <p class="vt-font-bold vt-text-mains-quaternary/20 vt-leading-none vt-inline-9fbcc3feef">404</p>
    <h1 class="vt-text-xl vt-font-bold vt-mt-4">Page not found</h1>
    <p class="vt-text-sm vt-text-mains-quaternary vt-mt-2">Try searching for what you need.</p>
    <div class="vt-mt-6">
      <input type="text" placeholder="Search..." class="vt-input" />
    </div>
    <div class="vt-flex vt-flex-wrap vt-gap-2 vt-justify-center vt-mt-6">
      <a href="/" class="vt-text-sm vt-text-info-primary">Home</a>
      <span class="vt-text-mains-quaternary">·</span>
      <a href="/components" class="vt-text-sm vt-text-info-primary">Components</a>
      <span class="vt-text-mains-quaternary">·</span>
      <a href="/docs/introduction" class="vt-text-sm vt-text-info-primary">Docs</a>
    </div>
  </div>
</div>

API Reference

Utility classes used in 404 page layouts.

Class Type Description
vt-min-h-screen Layout Full viewport height container
vt-bg-surfaces-background Color Page background
vt-text-mains-quaternary/20 Color Large muted 404 number — low opacity foreground
vt-bg-warning-background Color Warning/error tint for icon background
vt-btn vt-btn-primary Button Primary "Go home" action
vt-btn vt-btn-bordered Button Secondary "Go back" action
vt-max-w-xs vt-mx-auto Container Constrains description text width for readability