{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "error-page", "title": "Error Page", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/error-page/Error404.tsx", "content": "'use client'\n\nimport { ArrowLeft, LifeBuoy } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/components/ui/button'\n\nexport 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 className?: string\n}\n\nconst copy = (fallback: string, override?: string) => (override === undefined ? fallback : override)\n\nexport function Error404({\n code,\n title,\n description,\n image = '/illustrations/error-404.jpg',\n imageAlt = '',\n primaryLabel,\n secondaryLabel,\n primaryHref,\n secondaryHref,\n showPrimary = true,\n showSecondary = true,\n primaryDisabled = false,\n secondaryDisabled = false,\n onPrimary,\n onSecondary,\n layout = 'page',\n className,\n}: Error404Props) {\n const codeText = copy('404', code)\n const titleText = copy('Page not found', title)\n const descriptionText = copy(\n \"The page you're looking for doesn't exist or may have been moved. Check the URL or head back home.\",\n description,\n )\n const primaryText = copy('Back to home', primaryLabel)\n const secondaryText = copy('Contact support', secondaryLabel)\n\n return (\n \n
\n
\n {codeText ?

HTTP {codeText}

: null}\n {codeText ?

{codeText}

: null}\n

{titleText}

\n {descriptionText ?

{descriptionText}

: null}\n {showPrimary || showSecondary ? (\n
\n {showPrimary ? (\n primaryHref ? (\n \n ) : (\n \n )\n ) : null}\n {showSecondary ? (\n secondaryHref ? (\n \n ) : (\n \n )\n ) : null}\n
\n ) : null}\n
\n {image ? (\n
\n {imageAlt}\n
\n ) : image === undefined ? (\n
\n
\n curl -i https://app.acme.dev/pricing/teams\n
\n
\n

\n HTTP/1.1 {codeText || '404'} Not Found\n

\n

content-type: application/json

\n

x-request-id: req_9k2e18

\n

{'{ \"error\": \"not_found\", \"path\": \"/pricing/teams\" }'}

\n
\n
\n ) : null}\n
\n \n )\n}\n", "type": "registry:block", "target": "~/components/blocks/error-page/Error404.tsx" }, { "path": "packages/registry-react/blocks/error-page/Error500.tsx", "content": "'use client'\n\nimport { LifeBuoy, RefreshCcw } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/components/ui/button'\n\nexport interface Error500Props {\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 tertiaryLabel?: string\n primaryHref?: string\n secondaryHref?: string\n tertiaryHref?: string\n showPrimary?: boolean\n showSecondary?: boolean\n showTertiary?: boolean\n primaryDisabled?: boolean\n secondaryDisabled?: boolean\n tertiaryDisabled?: boolean\n onPrimary?: () => void\n onSecondary?: () => void\n onTertiary?: () => void\n /** `'page'` fills the viewport; `'contained'` fits a preview or nested panel. */\n layout?: 'page' | 'contained'\n className?: string\n}\n\nconst copy = (fallback: string, override?: string) => (override === undefined ? fallback : override)\n\nexport function Error500({\n code,\n title,\n description,\n image = '/illustrations/error-500.jpg',\n imageAlt = '',\n primaryLabel,\n secondaryLabel,\n tertiaryLabel,\n primaryHref,\n secondaryHref,\n tertiaryHref,\n showPrimary = true,\n showSecondary = true,\n showTertiary = true,\n primaryDisabled = false,\n secondaryDisabled = false,\n tertiaryDisabled = false,\n onPrimary,\n onSecondary,\n onTertiary,\n layout = 'page',\n className,\n}: Error500Props) {\n const codeText = copy('500', code)\n const titleText = copy('Something went wrong', title)\n const descriptionText = copy(\n 'We hit an unexpected error on our side. Try again in a moment — if it keeps happening, our team is on it.',\n description,\n )\n const primaryText = copy('Try again', primaryLabel)\n const secondaryText = copy('Back to home', secondaryLabel)\n const tertiaryText = copy('Contact support', tertiaryLabel)\n\n return (\n \n
\n
\n {codeText ?

HTTP {codeText}

: null}\n {codeText ?

{codeText}

: null}\n

{titleText}

\n {descriptionText ?

{descriptionText}

: null}\n {showPrimary || showSecondary || showTertiary ? (\n
\n {showPrimary ? (\n primaryHref ? (\n \n ) : (\n \n )\n ) : null}\n {showSecondary ? (\n secondaryHref ? (\n \n ) : (\n \n )\n ) : null}\n {showTertiary ? (\n tertiaryHref ? (\n \n ) : (\n \n )\n ) : null}\n
\n ) : null}\n
\n {image ? (\n
\n {imageAlt}\n
\n ) : image === undefined ? (\n
\n
\n POST /api/v1/invoices\n
\n
\n

\n HTTP/1.1{' '}\n {codeText || '500'} Internal Server Error\n

\n

error: ECONNRESET

\n

at: Worker.run:142

\n

x-request-id: req_8f3c2a

\n
\n
\n ) : null}\n
\n \n )\n}\n", "type": "registry:block", "target": "~/components/blocks/error-page/Error500.tsx" }, { "path": "packages/registry-react/blocks/error-page/ErrorPages.tsx", "content": "'use client'\n\nimport type { ComponentProps, ReactNode } from 'react'\nimport { Clock, RotateCcw } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/components/ui/button'\n\nexport type ErrorPagesVariant = '404' | '500' | '403' | 'maintenance'\n\nexport interface ErrorPagesProps {\n /** `'all'` renders the full gallery; a single variant renders just that screen. */\n variant?: ErrorPagesVariant | 'all'\n size?: 'sm' | 'default'\n className?: string\n title?: string\n description?: string\n /** Status numeral. Pass `''` to hide. */\n code?: string\n /** Eyebrow pill (maintenance ETA by default). Pass `''` to hide. */\n tag?: string\n /** Replaces the HTTP response panel on a single variant. Pass `''` to hide art. */\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 onHome?: () => void\n onSearch?: () => void\n onRetry?: () => void\n onStatus?: () => void\n onSwitchAccount?: () => void\n onRequestAccess?: () => void\n onSubscribe?: () => void\n}\n\nconst copy = (fallback: string, override?: string) => (override === undefined ? fallback : override)\n\nfunction Action({\n href,\n onClick,\n children,\n ...buttonProps\n}: {\n href?: string\n onClick?: () => void\n children: ReactNode\n} & Omit, 'onClick'>) {\n if (href) {\n return (\n \n )\n }\n return (\n \n )\n}\n\nexport function ErrorPages({\n variant = 'all',\n size = 'default',\n className,\n title,\n description,\n code,\n tag,\n image,\n imageAlt = '',\n primaryLabel,\n secondaryLabel,\n primaryHref,\n secondaryHref,\n showPrimary = true,\n showSecondary = true,\n primaryDisabled = false,\n secondaryDisabled = false,\n onHome,\n onSearch,\n onRetry,\n onStatus,\n onSwitchAccount,\n onRequestAccess,\n onSubscribe,\n}: ErrorPagesProps) {\n const pick = (v: ErrorPagesVariant, fallback: string, override?: string) =>\n variant === v ? copy(fallback, override) : fallback\n\n const frameClass = cn(\n 'border-border bg-card overflow-hidden rounded-xl border text-left',\n size === 'sm' && 'rounded-lg',\n )\n const imgClass = 'aspect-[16/10] w-full object-cover'\n const bodyClass = size === 'sm' ? 'p-5' : 'p-6'\n const codeClass = cn('font-semibold tracking-tighter', size === 'sm' ? 'text-2xl' : 'text-4xl')\n const titleClass = cn('mt-1.5 font-semibold tracking-tight', size === 'sm' ? 'text-base' : 'text-xl')\n const descClass = 'text-muted-foreground mt-2 max-w-sm text-sm'\n const actionsClass = cn('flex flex-wrap items-center gap-2', size === 'sm' ? 'mt-4' : 'mt-5')\n const actionSize = size === 'sm' ? ('xs' as const) : ('sm' as const)\n\n const show = (v: ErrorPagesVariant) => variant === 'all' || variant === v\n\n const title404 = pick('404', 'Page not found', title)\n const desc404 = pick(\n '404',\n \"The page you're looking for doesn't exist or was moved. Check the URL or head back home.\",\n description,\n )\n const code404 = pick('404', '404', code)\n const image404 = pick('404', '/illustrations/error-404.jpg', image)\n const primary404 = pick('404', 'Go home', primaryLabel)\n const secondary404 = pick('404', 'Search docs', secondaryLabel)\n\n const title500 = pick('500', 'Internal server error', title)\n const desc500 = pick(\n '500',\n 'Something went wrong on our end. The team has been notified — try again in a moment.',\n description,\n )\n const code500 = pick('500', '500', code)\n const image500 = pick('500', '/illustrations/error-500.jpg', image)\n const primary500 = pick('500', 'Retry', primaryLabel)\n const secondary500 = pick('500', 'Status page', secondaryLabel)\n\n const title403 = pick('403', 'Access denied', title)\n const desc403 = pick(\n '403',\n \"You don't have permission to view this page. Switch accounts or ask an admin to request access.\",\n description,\n )\n const code403 = pick('403', '403', code)\n const image403 = pick('403', '/illustrations/error-403.jpg', image)\n const primary403 = pick('403', 'Request access', primaryLabel)\n const secondary403 = pick('403', 'Switch account', secondaryLabel)\n\n const title503 = pick('maintenance', 'Scheduled maintenance', title)\n const desc503 = pick(\n 'maintenance',\n \"We're upgrading our systems. The service will be back online shortly.\",\n description,\n )\n const code503 = pick('maintenance', '503', code)\n const image503 = pick('maintenance', '/illustrations/error-maintenance.jpg', image)\n const tag503 = pick('maintenance', 'Back online around 14:00 UTC', tag)\n const primary503 = pick('maintenance', 'Subscribe for updates', primaryLabel)\n const secondary503 = variant === 'maintenance' ? (secondaryLabel ?? '') : (secondaryLabel ?? '')\n\n return (\n \n {show('404') && (\n
\n {image404 ? (\n {imageAlt}\n ) : image404 === undefined ? (\n
\n
\n GET /pricing/teams\n
\n
\n

\n HTTP/1.1 {code404 || '404'} Not Found\n

\n

x-request-id: req_9k2e18

\n
\n
\n ) : null}\n
\n {code404 ?

{code404}

: null}\n

{title404}

\n

{desc404}

\n {variant === '404' && tag ? (\n

\n {tag}\n

\n ) : null}\n {showPrimary || showSecondary ? (\n
\n {showPrimary ? (\n \n {primary404}\n \n ) : null}\n {showSecondary ? (\n \n {secondary404}\n \n ) : null}\n
\n ) : null}\n
\n
\n )}\n\n {show('500') && (\n
\n {image500 ? (\n {imageAlt}\n ) : image500 === undefined ? (\n
\n
\n POST /api/v1/invoices\n
\n
\n

\n HTTP/1.1{' '}\n {code500 || '500'} Internal Server Error\n

\n

error: ECONNRESET at Worker.run:142

\n
\n
\n ) : null}\n
\n {code500 ?

{code500}

: null}\n

{title500}

\n

{desc500}

\n {variant === '500' && tag ? (\n

\n {tag}\n

\n ) : null}\n {showPrimary || showSecondary ? (\n
\n {showPrimary ? (\n \n \n {primary500}\n \n ) : null}\n {showSecondary ? (\n \n {secondary500}\n \n ) : null}\n
\n ) : null}\n
\n
\n )}\n\n {show('403') && (\n
\n {image403 ? (\n {imageAlt}\n ) : image403 === undefined ? (\n
\n
\n GET /admin/billing\n
\n
\n

\n HTTP/1.1{' '}\n {code403 || '403'} Forbidden\n

\n

scope billing:read — denied for guest

\n
\n
\n ) : null}\n
\n {code403 ?

{code403}

: null}\n

{title403}

\n

{desc403}

\n {variant === '403' && tag ? (\n

\n {tag}\n

\n ) : null}\n {showPrimary || showSecondary ? (\n
\n {showSecondary ? (\n \n {secondary403}\n \n ) : null}\n {showPrimary ? (\n \n {primary403}\n \n ) : null}\n
\n ) : null}\n
\n
\n )}\n\n {show('maintenance') && (\n
\n {image503 ? (\n {imageAlt}\n ) : image503 === undefined ? (\n
\n
GET /health
\n
\n

\n HTTP/1.1{' '}\n {code503 || '503'} Service Unavailable\n

\n

Retry-After: 3600

\n
\n
\n ) : null}\n
\n {code503 ?

{code503}

: null}\n

{title503}

\n

{desc503}

\n {tag503 ? (\n

\n \n {tag503}\n

\n ) : null}\n {showPrimary || (showSecondary && secondary503) ? (\n
\n {showPrimary ? (\n \n {primary503}\n \n ) : null}\n {showSecondary && secondary503 ? (\n \n {secondary503}\n \n ) : null}\n
\n ) : null}\n
\n
\n )}\n \n )\n}\n", "type": "registry:block", "target": "~/components/blocks/error-page/ErrorPages.tsx" } ], "dependencies": [ "lucide-react" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/react/button.json" ], "description": "Status-screen set with prop-driven 404 and 500 pages plus a four-variant gallery (404, 500, 403, and maintenance) with single-screen, compact-size, and callback controls.", "categories": [ "layout", "feedback", "marketing", "utility" ] }