ErrorCard

Unified error display for 404, 403, error boundaries, and custom errors

Overview

ErrorCard is a unified error display component that works with LayoutCard to create consistent, branded error experiences. Use the type prop for common scenarios, or customize with props for specific needs.

Error Types

type="error" - Error boundaries with Try Again + Go Home
type="404" - Not found pages with logo + Go Back + Go Home
type="403" - Access denied with lock icon + Go Back + Go Home
Custom - Use props directly for other scenarios

Type Presets

type="error"

For error.tsx error boundaries with Try Again action.

Something Went Wrong

An unexpected error occurred. Please try again.

Go Home

type="404"

For not-found.tsx 404 pages with logo.

Page Not Found

The page you're looking for doesn't exist or has been moved.

Go Back Go Home

type="404" (No i18n)

With noI18n prop for root-level pages outside locale context.

Well, This Is Awkward

That page isn't here.

Go Back Home

type="403"

For 403 access denied pages with warning lock icon.

Hold Up

You need a different access level to view this page.

Go Back Go Home

Custom Variants

Default Variant

Custom icon and text with default (primary) color.

Feature Coming Soon

This feature is not yet available. We're working hard to bring it to you.

Learn More

Destructive Variant

Destructive variant for critical errors.

Server Error

Something went wrong on our end. Please try again later.

Contact Support

Warning Variant

Warning variant for session/auth issues.

Session Expired

Your session has expired. Please log in again to continue.

Props Reference

ErrorCardProps

Prop	Type	Default	Description
`type`	`'error' \| '404' \| '403'`	`-`	Preset type - sets icon, colors, and default text
`icon`	`IconDefinition`	`-`	Custom icon (overrides type preset)
`iconVariant`	`'default' \| 'destructive' \| 'warning'`	`'default'`	Icon color variant
`logo`	`string`	`-`	Logo image source (overrides icon)
`logoAlt`	`string`	`-`	Logo alt text
`title`	`string`	`-`	Custom title (overrides type preset)
`description`	`string`	`-`	Custom description (overrides type preset)
`reset`	`() => void`	`-`	Reset function for error boundaries (type="error")
`primaryAction`	`ErrorCardAction`	`-`	Custom primary action (overrides type preset)
`secondaryAction`	`ErrorCardAction`	`-`	Custom secondary action (overrides type preset)
`noI18n`	`ErrorCardNoI18nStrings`	`-`	Strings for use outside i18n context (root not-found.tsx)
`devInfo`	`string`	`-`	Development-only info (error messages, denial reasons)

Usage

Basic Usage

import { LayoutCard } from '@/ui/layouts';
import { ErrorCard } from '@/ui/components';

// 404 page
<LayoutCard>
  <ErrorCard type="404" />
</LayoutCard>

// Error boundary
<LayoutCard>
  <ErrorCard type="error" reset={reset} />
</LayoutCard>

// Access denied
<LayoutCard>
  <ErrorCard type="403" />
</LayoutCard>

// Custom error
<LayoutCard>
  <ErrorCard
    icon={faRocket}
    iconVariant="warning"
    title="Custom Title"
    description="Custom message"
    primaryAction={{ label: "Action", href: "/" }}
  />
</LayoutCard>

Error Boundary (error.tsx)

// In app/error.tsx
'use client';
import { LayoutCard } from '@/ui/layouts';
import { ErrorCard } from '@/ui/components';

export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  return (
    <LayoutCard>
      <ErrorCard type="error" reset={reset} />
    </LayoutCard>
  );
}

Not Found (not-found.tsx)

// In app/not-found.tsx (root - no i18n)
'use client';
import { LayoutCard } from '@/ui/layouts';
import { ErrorCard } from '@/ui/components';

export default function NotFound() {
  return (
    <LayoutCard>
      <ErrorCard
        type="404"
        noI18n={{
          title: "Well, This Is Awkward",
          description: "That page isn't here.",
          primaryLabel: "Go Back",
          secondaryLabel: "Home",
          logoAlt: "Logo",
        }}
      />
    </LayoutCard>
  );
}

Prop

Type

Default

Description

type

'error' | '404' | '403'

-

Preset type - sets icon, colors, and default text

icon

IconDefinition

-

Custom icon (overrides type preset)

iconVariant

'default' | 'destructive' | 'warning'

'default'

Icon color variant

logo

string

-

Logo image source (overrides icon)

logoAlt

string

-

Logo alt text

title

string

-

Custom title (overrides type preset)

description

string

-

Custom description (overrides type preset)

reset

() => void

-

Reset function for error boundaries (type="error")

primaryAction

ErrorCardAction

-

Custom primary action (overrides type preset)

secondaryAction

ErrorCardAction

-

Custom secondary action (overrides type preset)

noI18n

ErrorCardNoI18nStrings

-

Strings for use outside i18n context (root not-found.tsx)

devInfo

string

-

Development-only info (error messages, denial reasons)

import { LayoutCard } from '@/ui/layouts'; import { ErrorCard } from '@/ui/components'; // 404 page <LayoutCard> <ErrorCard type="404" /> </LayoutCard> // Error boundary <LayoutCard> <ErrorCard type="error" reset={reset} /> </LayoutCard> // Access denied <LayoutCard> <ErrorCard type="403" /> </LayoutCard> // Custom error <LayoutCard> <ErrorCard icon={faRocket} iconVariant="warning" title="Custom Title" description="Custom message" primaryAction={{ label: "Action", href: "/" }} /> </LayoutCard>

// In app/error.tsx 'use client'; import { LayoutCard } from '@/ui/layouts'; import { ErrorCard } from '@/ui/components'; export default function Error({ error, reset, }: { error: Error & { digest?: string }; reset: () => void; }) { return ( <LayoutCard> <ErrorCard type="error" reset={reset} /> </LayoutCard> ); }

// In app/not-found.tsx (root - no i18n) 'use client'; import { LayoutCard } from '@/ui/layouts'; import { ErrorCard } from '@/ui/components'; export default function NotFound() { return ( <LayoutCard> <ErrorCard type="404" noI18n={{ title: "Well, This Is Awkward", description: "That page isn't here.", primaryLabel: "Go Back", secondaryLabel: "Home", logoAlt: "Logo", }} /> </LayoutCard> ); }