{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "error-404",
  "title": "404 Not Found",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-svelte/blocks/error-404/Error404.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { Component } from 'svelte'\n\n  export interface Error404Props {\n    code?: string\n    title?: string\n    description?: string\n    /** Replaces the HTTP response panel. Pass `''` to hide art entirely. */\n    image?: string\n    imageAlt?: string\n    primaryLabel?: string\n    secondaryLabel?: string\n    primaryHref?: string\n    secondaryHref?: string\n    showPrimary?: boolean\n    showSecondary?: boolean\n    primaryDisabled?: boolean\n    secondaryDisabled?: boolean\n    onPrimary?: () => void\n    onSecondary?: () => void\n    /** `'page'` fills the viewport; `'contained'` fits a preview or nested panel. */\n    layout?: 'page' | 'contained'\n    class?: string\n  }\n</script>\n\n<script lang=\"ts\">\n  import { ArrowLeft, LifeBuoy } from '@lucide/svelte'\n  import { cn } from '$lib/utils'\n  import { Button, buttonVariants, type ButtonVariants } from '$lib/components/ui/button'\n\n  let {\n    code: codeOverride,\n    title: titleOverride,\n    description: descriptionOverride,\n    image = '/illustrations/error-404.jpg',\n    imageAlt = '',\n    primaryLabel: primaryLabelOverride,\n    secondaryLabel: secondaryLabelOverride,\n    primaryHref,\n    secondaryHref,\n    showPrimary = true,\n    showSecondary = true,\n    primaryDisabled = false,\n    secondaryDisabled = false,\n    onPrimary,\n    onSecondary,\n    layout = 'page',\n    class: className,\n  }: Error404Props = $props()\n\n  const copy = (fallback: string, override?: string) => (override === undefined ? fallback : override)\n\n  const code = $derived(copy('404', codeOverride))\n  const title = $derived(copy('Page not found', titleOverride))\n  const description = $derived(\n    copy(\n      \"The page you're looking for doesn't exist or may have been moved. Check the URL or head back home.\",\n      descriptionOverride,\n    ),\n  )\n  const primaryLabel = $derived(copy('Back to home', primaryLabelOverride))\n  const secondaryLabel = $derived(copy('Contact support', secondaryLabelOverride))\n</script>\n\n{#snippet actionButton(\n  href: string | undefined,\n  label: string,\n  variant: ButtonVariants['variant'] = 'default',\n  disabled = false,\n  onclick?: () => void,\n  Icon?: Component,\n)}\n  {#if href}\n    <a {href} class={buttonVariants({ variant, size: 'lg' })} {onclick} aria-disabled={disabled}>\n      {#if Icon}\n        <Icon />\n      {/if}\n      {label}\n    </a>\n  {:else}\n    <Button {variant} size=\"lg\" {disabled} {onclick}>\n      {#if Icon}\n        <Icon />\n      {/if}\n      {label}\n    </Button>\n  {/if}\n{/snippet}\n\n<section\n  data-slot=\"error-404\"\n  data-layout={layout}\n  class={cn(\n    'bg-background relative flex items-center overflow-hidden px-6 py-16',\n    layout === 'page' ? 'min-h-svh' : 'min-h-[28rem]',\n    className,\n  )}\n>\n  <div class=\"mx-auto grid w-full max-w-5xl items-center gap-10 lg:grid-cols-2 lg:gap-16\">\n    <div>\n      {#if code}\n        <p class=\"text-muted-foreground text-sm font-medium\">HTTP {code}</p>\n      {/if}\n      {#if code}\n        <p class=\"mt-3 text-6xl font-semibold tracking-tighter sm:text-7xl\">{code}</p>\n      {/if}\n      <h1 class=\"mt-3 text-2xl font-semibold tracking-tight sm:text-3xl\">{title}</h1>\n      {#if description}\n        <p class=\"text-muted-foreground mt-4 max-w-md text-base\">{description}</p>\n      {/if}\n      {#if showPrimary || showSecondary}\n        <div class=\"mt-8 flex flex-wrap items-center gap-3\">\n          {#if showPrimary}\n            {@render actionButton(primaryHref, primaryLabel, 'default', primaryDisabled, onPrimary, ArrowLeft)}\n          {/if}\n          {#if showSecondary}\n            {@render actionButton(secondaryHref, secondaryLabel, 'outline', secondaryDisabled, onSecondary, LifeBuoy)}\n          {/if}\n        </div>\n      {/if}\n    </div>\n    {#if image}\n      <div class=\"border-border bg-muted overflow-hidden rounded-xl border\">\n        <img src={image} alt={imageAlt} class=\"aspect-[4/3] w-full object-cover\" />\n      </div>\n    {:else if image === undefined}\n      <div\n        class=\"border-border bg-muted/40 overflow-hidden rounded-xl border font-mono\"\n        aria-hidden=\"true\"\n      >\n        <div class=\"border-border text-muted-foreground truncate border-b px-3 py-2 text-xs\">\n          curl -i https://app.acme.dev/pricing/teams\n        </div>\n        <div class=\"space-y-1 p-4 text-xs leading-relaxed\">\n          <p><span class=\"text-muted-foreground\">HTTP/1.1</span> {code || '404'} Not Found</p>\n          <p class=\"text-muted-foreground\">content-type: application/json</p>\n          <p class=\"text-muted-foreground\">x-request-id: req_9k2e18</p>\n          <p class=\"text-muted-foreground mt-3\">{'{ \"error\": \"not_found\", \"path\": \"/pricing/teams\" }'}</p>\n        </div>\n      </div>\n    {/if}\n  </div>\n</section>\n",
      "type": "registry:block",
      "target": "~/src/lib/components/blocks/error-404/Error404.svelte"
    }
  ],
  "dependencies": [
    "@lucide/svelte"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/svelte/button.json"
  ],
  "description": "Full-page 404 with an isometric missing-page illustration, HTTP code, headline, and Back to home + Contact support. Prop-driven: pass title, description, image, action labels, hrefs, and layout (`page` | `contained`). Pass `image=\"\"` to hide the art.",
  "categories": [
    "layout",
    "feedback"
  ],
  "deprecated": true,
  "replacedBy": "error-page"
}