Not Found
A full-page 404 screen: a phone filming an open cardboard box over an oversized 404, plus a heading, a description and an optional action area via children (e.g. a Button back to home). Stays router-agnostic — wire up navigation in the consuming app, not here.
404 page
Drop it straight into a +error.svelte for a 404. The copy has sensible defaults, and children is where the way out goes — a page that says nothing was found and offers nowhere to go is a dead end.
<NotFound>
<Button href="/">Back to the docs</Button>
</NotFound>Its own words
Override title and description when the thing that is missing is more specific than a page — an order, a merchant, a report. Say what was looked for; a generic 404 leaves the reader guessing whether they mistyped or it was deleted.
<NotFound
title="No such order"
description="Order 9999 doesn't exist, or it belongs to another store."
>
<Button href="/blocks/orders" variant="secondary">Back to orders</Button>
</NotFound>API
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | 'Whoops!' | Heading rendered under the illustration. |
description | string | "We can't seem to find the page you are looking for." | Muted supporting copy rendered under the title. |
children | import('svelte').Snippet | Optional action area rendered below the description (e.g. a Button back home). | |
class | string | Additional Tailwind classes merged onto the root container. |