Error State

Shell for full-page error screens: an illustration, a heading, a description and an optional action area via children. Backs NotFound and ServerError — use it directly for other empty states so they keep the same rhythm. An optional code stands behind the artwork as an oversized glass numeral (see .glass-text), which is why it lives here rather than inside each screen's drawing: it is a surface lit by the app's light source, not part of the illustration.

An empty state of your own

NotFound and ServerError are this component with an illustration and copy already chosen. Use it directly for any other full-page state so it keeps the same rhythm — illustration, heading, description, one action — instead of each screen inventing its own.

No orders yet

The first order will show up here the moment it is placed. Nothing to do until then.

Preview the storefront

With a status code

code sets an oversized numeral in glass behind the artwork. It is decorative — the heading carries the meaning — which is why it lives here rather than inside each drawing: it is a surface lit by the app's light source, not part of the illustration.

Not your store

This account doesn't have access to Luxe Fashion.

Switch account

API

Prop Type Default Description
title required string

Heading rendered under the illustration.

description required string

Muted supporting copy rendered under the title.

illustration required import('svelte').Snippet

Artwork rendered above the copy, sized to a fixed-width column.

code string

Status code set in glass behind the artwork (e.g. 404). Decorative — the heading carries the meaning.

children import('svelte').Snippet

Optional action area rendered below the description (e.g. a Button).

class string

Additional Tailwind classes merged onto the root container.