New
Error PagesCentered 404 Page
A centred 404 with a big gradient code, a heading, sub-copy and a pair of recovery actions.
#error#404#not-found
3 frameworksBeginner
Loading…
An offline screen with a struck-through wifi icon and a single Retry action to reconnect.
<section class="mx-auto flex w-full max-w-lg flex-col items-center px-4 py-16 text-center sm:py-24">
<span class="flex h-16 w-16 items-center justify-center rounded-full bg-gray-100 text-gray-500 dark:bg-gray-800 dark:text-gray-400">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" class="h-8 w-8" aria-hidden="true">
<path d="M2 8.5a15 15 0 0 1 20 0" />
<path d="M5 12a10 10 0 0 1 14 0" />
<path d="M8.5 15.5a5 5 0 0 1 7 0" />
<path d="M12 19h.01" />
<path d="M3 3l18 18" />
</svg>
</span>
<h1 class="mt-6 text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl dark:text-gray-100">
You're offline
</h1>
<p class="mt-3 max-w-md text-base leading-relaxed text-gray-600 dark:text-gray-400">
We can't reach the network right now. Check your connection and try again.
</p>
<div class="mt-8 flex w-full flex-col items-center justify-center gap-3 sm:flex-row">
<button type="button" class="inline-flex w-full items-center justify-center rounded-lg bg-blue-600 px-5 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-blue-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white motion-reduce:transition-none sm:w-auto dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-950">
Retry
</button>
</div>
</section>| Prop | Type | Default | Description |
|---|---|---|---|
title | string | 'You're offline' | Heading text for the card. |
message | string | - | Body text of the notification. |
retryLabel | string | 'Retry' | Retry label |
onRetry | () => void | - | On retry |
className | string | - | Additional classes merged onto the root element. |
The icon is a hand-drawn wifi-slash in one `currentColor` stroke so it inverts cleanly in dark mode. Retry is a `<button>` on `onRetry` - wire it to re-fetch or reload once the connection is back.