Empty State With Illustration
Two variants — nothing created yet, versus filters excluded everything — because offering "create your first" to a bad filter is the classic bug.
404 With Search & Suggestions
A 404 that helps: a real GET search form that works without JavaScript, likely destinations, and home as the fallback rather than the headline.
146 lineslucide-reactAdded 8 Aug 2026Updated 11 Sept 2026
- 404
- not found
- error page
- search
What's included
components/not-found-404.tsx- Needs lucide-react
Works with
- React
- Next.js
- Tailwind CSS
- TypeScript
npx hoverlab add not-found-404
Or over MCP, from your editor's agent — no account needed.
License
Free to read, copy and install, for personal and non-commercial projects. Shipping it in client work or a paid product needs Pro ($79 once). The source lands in your repo and stops being ours — no attribution, nothing to upgrade.
Was this useful?
Start a page with this section — add more, order them, and leave with the page source.
Preview
We could not find that page
The link may be out of date, or the page may have moved. Here are a few ways forward.
Rendered live in your current theme — this is the same component whose source is below, not a screenshot of it.
Source
components/not-found-404.tsx
/**
* <NotFound404> — a 404 page that does something useful.
*
* Most 404s are a big number and a link home, which helps nobody: the user
* arrived at a specific URL wanting a specific thing, and "go to the
* homepage" makes them start their search over.
*
* This one offers the three routes that actually resolve the situation —
* search, a short list of likely destinations, and going back — with home
* as the fallback rather than the headline.
*
* Server component. The search field is a real GET form, so it works
* before hydration and on a page that never hydrates at all.
*/
import * as React from 'react'
import { Search, ArrowLeft, House, ArrowRight } from 'lucide-react'
export interface SuggestedLink {
label: string
description: string
href: string
}
export interface NotFound404Props {
code?: string
title?: string
description?: string
searchAction?: string
links?: SuggestedLink[]
homeHref?: string
/**
* Id for the field. A server component cannot call `useId`, so this is
* the escape hatch for a page that renders two of these: give the second
* one its own id rather than letting both labels resolve to the first.
*/
inputId?: string
className?: string
}
const DEFAULT_LINKS: SuggestedLink[] = [
{ label: 'Documentation', description: 'Guides and API reference', href: '/docs' },
{ label: 'Dashboard', description: 'Your projects and settings', href: '/dashboard' },
{ label: 'Status', description: 'Current uptime and incidents', href: '/status' },
]
export function NotFound404({
code = '404',
title = 'We could not find that page',
description = 'The link may be out of date, or the page may have moved. Here are a few ways forward.',
searchAction = '/search',
inputId = 'notfound-search',
links = DEFAULT_LINKS,
homeHref = '/',
className = '',
}: NotFound404Props) {
return (
<div
className={`mx-auto flex w-full max-w-2xl flex-col items-center px-6 py-16 text-center ${className}`}
>
<span
aria-hidden
className="bg-gradient-to-br from-primary to-emerald-500 bg-clip-text text-7xl font-extrabold tracking-tighter text-transparent sm:text-8xl"
>
{code}
</span>
<h1 className="mt-4 text-balance text-2xl font-bold tracking-tight sm:text-3xl">
{title}
</h1>
<p className="mt-3 max-w-md text-pretty text-muted-foreground">{description}</p>
{/* A real GET form — no JavaScript required. */}
<form action={searchAction} method="get" className="mt-8 flex w-full max-w-md gap-2">
<div className="relative flex-1">
<label htmlFor={inputId} className="sr-only">
Search the site
</label>
<Search
aria-hidden
className="pointer-events-none absolute start-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground"
/>
<input
id={inputId}
name="q"
type="search"
placeholder="Search for what you were looking for"
className="w-full rounded-xl border border-border/60 bg-background py-2.5 ps-9 pe-3 text-sm outline-none transition-shadow placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-primary"
/>
</div>
<button
type="submit"
className="shrink-0 rounded-xl bg-primary px-4 py-2.5 text-sm font-semibold text-primary-foreground transition-colors hover:bg-primary/90"
>
Search
</button>
</form>
{links.length > 0 ? (
<ul className="mt-8 w-full max-w-md divide-y divide-border/40 overflow-hidden rounded-2xl border border-border/60 bg-card/60 text-start">
{links.map((link) => (
<li key={link.href}>
<a
href={link.href}
className="group flex items-center gap-3 px-4 py-3 transition-colors hover:bg-muted/40"
>
<span className="min-w-0 flex-1">
<span className="block text-sm font-medium">{link.label}</span>
<span className="block text-xs text-muted-foreground">
{link.description}
</span>
</span>
<ArrowRight
aria-hidden
className="h-4 w-4 shrink-0 text-muted-foreground transition-transform group-hover:translate-x-0.5 rtl:rotate-180 rtl:group-hover:-translate-x-0.5"
/>
</a>
</li>
))}
</ul>
) : null}
<div className="mt-8 flex flex-wrap items-center justify-center gap-4 text-sm">
{/* Plain anchor so it works without a router; swap for your Link. */}
<a
href={homeHref}
className="inline-flex items-center gap-1.5 text-muted-foreground transition-colors hover:text-foreground"
>
<House aria-hidden className="h-4 w-4" />
Back to home
</a>
<span aria-hidden className="text-border">
|
</span>
<a
href={homeHref}
className="inline-flex items-center gap-1.5 text-muted-foreground transition-colors hover:text-foreground"
>
<ArrowLeft aria-hidden className="h-4 w-4 rtl:rotate-180" />
Previous page
</a>
</div>
</div>
)
}
Before you paste
- Styling is Tailwind utility classes on semantic tokens (
bg-card,text-muted-foreground) — it inherits your theme instead of overriding it. - Install: npm i lucide-react
- Every prop has a default, so it renders standalone before you wire it up.
Where it goes
Drop it at components/not-found-404.tsx and import it where you need the section:
import { NotFound404 } from '@/components/not-found-404'Customize
5 of this block’s props are simple enough to drive from here. Change them and the block below re-renders — it is the same component whose source is above, not a mock of it. Everything else it accepts is in the table underneath.
Props
Read out of the component’s own type and signature, so this cannot drift from the source below. Every prop has a default — the component renders standalone before you pass it anything.
| Prop | Type | Default |
|---|---|---|
code | string | '404' |
title | string | 'We could not find that page' |
description | string | — |
searchAction | string | '/search' |
links | SuggestedLink[] | DEFAULT_LINKS |
homeHref | string | '/' |
inputIdId for the field. A server component cannot call `useId`, so this is the escape hatch for a page that renders two of these: give the second one its own id rather than letting both labels resolve to the first. | string | 'notfound-search' |
className | string | '' |
Not using React?
The same block rendered once to markup, wrapped as a file your framework compiles. Tailwind classes are framework-agnostic, so the design transfers intact — the behaviour does not.
not-found-404.html
<!--
404 With Search & Suggestions — markup from the Hoverlab catalog.
This is the block rendered once to HTML and wrapped as a component
file. It is not a port of the React source: the Tailwind classes carry
the design, which is the part that took the work, and they are the same
in every framework.
This block has no interactive behaviour, so nothing is missing.
-->
<div class="mx-auto flex w-full max-w-2xl flex-col items-center px-6 py-16 text-center ">
<span aria-hidden="true" class="bg-gradient-to-br from-primary to-emerald-500 bg-clip-text text-7xl font-extrabold tracking-tighter text-transparent sm:text-8xl">404</span>
<h1 class="mt-4 text-balance text-2xl font-bold tracking-tight sm:text-3xl">We could not find that page</h1>
<p class="mt-3 max-w-md text-pretty text-muted-foreground">The link may be out of date, or the page may have moved. Here are a few ways forward.</p>
<form class="mt-8 flex w-full max-w-md gap-2" action="/search" method="get">
<div class="relative flex-1">
<label for="notfound-search" class="sr-only">Search the site</label>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search pointer-events-none absolute start-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" aria-hidden="true">
<path d="m21 21-4.34-4.34"></path>
<circle cx="11" cy="11" r="8"></circle>
</svg>
<input id="notfound-search" type="search" placeholder="Search for what you were looking for" class="w-full rounded-xl border border-border/60 bg-background py-2.5 ps-9 pe-3 text-sm outline-none transition-shadow placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-primary" name="q" />
</div>
<button type="submit" class="shrink-0 rounded-xl bg-primary px-4 py-2.5 text-sm font-semibold text-primary-foreground transition-colors hover:bg-primary/90">Search</button>
</form>
<ul class="mt-8 w-full max-w-md divide-y divide-border/40 overflow-hidden rounded-2xl border border-border/60 bg-card/60 text-start">
<li>
<a href="/docs" class="group flex items-center gap-3 px-4 py-3 transition-colors hover:bg-muted/40">
<span class="min-w-0 flex-1">
<span class="block text-sm font-medium">Documentation</span>
<span class="block text-xs text-muted-foreground">Guides and API reference</span>
</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-4 w-4 shrink-0 text-muted-foreground transition-transform group-hover:translate-x-0.5 rtl:rotate-180 rtl:group-hover:-translate-x-0.5" aria-hidden="true">
<path d="M5 12h14"></path>
<path d="m12 5 7 7-7 7"></path>
</svg>
</a>
</li>
<li>
<a href="/dashboard" class="group flex items-center gap-3 px-4 py-3 transition-colors hover:bg-muted/40">
<span class="min-w-0 flex-1">
<span class="block text-sm font-medium">Dashboard</span>
<span class="block text-xs text-muted-foreground">Your projects and settings</span>
</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-4 w-4 shrink-0 text-muted-foreground transition-transform group-hover:translate-x-0.5 rtl:rotate-180 rtl:group-hover:-translate-x-0.5" aria-hidden="true">
<path d="M5 12h14"></path>
<path d="m12 5 7 7-7 7"></path>
</svg>
</a>
</li>
<li>
<a href="/status" class="group flex items-center gap-3 px-4 py-3 transition-colors hover:bg-muted/40">
<span class="min-w-0 flex-1">
<span class="block text-sm font-medium">Status</span>
<span class="block text-xs text-muted-foreground">Current uptime and incidents</span>
</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-4 w-4 shrink-0 text-muted-foreground transition-transform group-hover:translate-x-0.5 rtl:rotate-180 rtl:group-hover:-translate-x-0.5" aria-hidden="true">
<path d="M5 12h14"></path>
<path d="m12 5 7 7-7 7"></path>
</svg>
</a>
</li>
</ul>
<div class="mt-8 flex flex-wrap items-center justify-center gap-4 text-sm">
<a href="/" class="inline-flex items-center gap-1.5 text-muted-foreground transition-colors hover:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-house h-4 w-4" aria-hidden="true"><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"></path><path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path></svg>Back to home</a>
<span aria-hidden="true" class="text-border">|</span>
<a href="/" class="inline-flex items-center gap-1.5 text-muted-foreground transition-colors hover:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-left h-4 w-4 rtl:rotate-180" aria-hidden="true"><path d="m12 19-7-7 7-7"></path><path d="M19 12H5"></path></svg>Previous page</a>
</div>
</div>
- This is rendered HTML, not a translation of the React source. The Tailwind classes carry the design and work in any framework.
- It is one frame: the component in its initial state, with no props applied beyond the defaults.
- Requires Tailwind, and the design tokens the classes reference (bg-card, text-muted-foreground, and so on). The template ZIPs ship a globals.css that defines them.
What each framework gets across the whole catalog — effects convert properly; this rung is markup.
For AI
The component, its props, the design tokens it expects and the command that installs it — as one prompt. Paste it into Claude, Cursor, v0 or ChatGPT and what they build around it will match the rest of the catalog instead of inventing its own system.
See the prompt
Used in these pages
Want the whole screen instead of this one section? Open a page and copy it entire.
7 more blocks in Empty & Error States
All of them free to read, copy and install — no account, no locked tiles, no watermarked preview. The whole catalog is open, and so are the API and the CLI.
Browse Empty & Error StatesShipping one commercially
Copying the code is free. Putting it in client work or a paid product is what Pro is for — the licence, not the access.
- A commercial licence for everything in the catalog
- Unlimited bundle exports, in Vue, Svelte and Tailwind
- One payment — no subscription, nothing to renew
More Empty & Error States blocks
View categoryError State With Retry
Failed-to-load panel with a visible retry, a copyable error reference and the stack tucked behind a disclosure.
Shimmer Skeleton List
Loading placeholders with varied row widths and a sweep that is motion-safe only, falling back to a flat tint under reduced motion.
Permission Denied (403)
The state where the page exists and the account is not on the list: names who can grant access, sends the request, and leaks nothing about what is inside.
Offline With Queued Changes
Leads with what still works — three edits saved on this device — instead of with the failure. The retry backoff counts down in the open, and the three things that genuinely cannot work offline are named rather than discovered.
Empty Because of Filters
The empty state for a list emptied by its own filters: every active filter shown as a removable chip ordered by how many results it would restore, with clear-all deliberately second.
Scheduled Maintenance Window
Planned downtime with a live countdown, an end time in the reader’s timezone, what still works — and a different sentence once the window overruns rather than a negative timer.