@lilith/ui-error-pages

Error page components with stylized anime girl illustrations for the lilith platform. Includes full-page error templates for common HTTP errors, resource exhaustion pages, and empty state components.

Features

• HTTP Error Pages - 404, 500, 503, and maintenance pages
• Resource Exhausted Pages - Quota limit pages for messages, searches, and profile views
• Empty State Components - No results, empty lists, empty inbox, etc.
• 37+ Image Variations - Unique anime girl illustrations
• 9 Image Shapes - Square, hero, portrait, OG card, thumbnail, and more
• Dark Theme - Matches platform aesthetic
• Responsive Design - Works on all screen sizes
• React Router Integration - Works with react-router-dom v6/v7

Installation

npm install @lilith/ui-error-pages
# or
pnpm add @lilith/ui-error-pages

Peer Dependencies

npm install react react-dom react-router-dom styled-components

Usage

404 Not Found

import { NotFoundPage } from '@lilith/ui-error-pages';

// In your router
<Route path="*" element={<NotFoundPage />} />

// With custom props
<NotFoundPage
  title="Page Not Found"
  message="The page you're looking for doesn't exist"
  homeUrl="/"
  homeLabel="Go Home"
/>

500 Server Error

import { ServerErrorPage } from '@lilith/ui-error-pages';

<Route path="/error" element={<ServerErrorPage />} />

<ServerErrorPage
  title="Something Went Wrong"
  message="We're working on fixing this issue"
  showRetry={true}
  onRetry={() => window.location.reload()}
/>

503 Service Unavailable

import { ServiceUnavailablePage } from '@lilith/ui-error-pages';

<ServiceUnavailablePage
  title="Service Unavailable"
  message="Please try again in a few minutes"
  estimatedDowntime="15 minutes"
/>

Maintenance Page

import { MaintenancePage } from '@lilith/ui-error-pages';

<MaintenancePage
  title="Scheduled Maintenance"
  message="We're upgrading our systems"
  estimatedEnd={new Date('2024-01-15T18:00:00')}
  progress={65}
  showProgress={true}
/>

Resource Exhausted Pages

For quota limits (HTTP 429).

import {
  MessagesExhaustedPage,
  SearchesExhaustedPage,
  ProfileViewsExhaustedPage,
} from '@lilith/ui-error-pages';

// Messages quota
<MessagesExhaustedPage
  used={50}
  limit={50}
  resetTime={new Date('2024-01-15T00:00:00')}
  upgradeUrl="/pricing"
/>

// Searches quota
<SearchesExhaustedPage
  used={100}
  limit={100}
  resetTime={new Date('2024-01-15T00:00:00')}
/>

// Profile views quota
<ProfileViewsExhaustedPage
  used={25}
  limit={25}
  resetTime={new Date('2024-01-15T00:00:00')}
/>

// Generic resource exhausted
import { ResourceExhaustedPage } from '@lilith/ui-error-pages';

<ResourceExhaustedPage
  resourceType="downloads"
  used={10}
  limit={10}
  resetTime={new Date()}
/>

Empty State Pages

For empty lists, no results, etc.

import { EmptyStatePage, EmptyStateImage } from '@lilith/ui-error-pages';

// Full page empty state
<EmptyStatePage
  type="no-results"
  title="No Creators Found"
  message="Try adjusting your search filters"
  actionLabel="Clear Filters"
  onAction={() => clearFilters()}
/>

// Available types: 'no-results', 'empty-list', 'no-content',
//                  'empty-inbox', 'no-matches', 'empty-favorites'

// Inline empty state image
<EmptyStateImage type="empty-list" size="md" />

Generic Error Page

For custom error codes.

import { GenericErrorPage } from '@lilith/ui-error-pages';

<GenericErrorPage
  errorCode={403}
  title="Access Denied"
  message="You don't have permission to view this page"
  actions={[
    { label: 'Go Back', onClick: () => history.back() },
    { label: 'Contact Support', href: '/support' },
  ]}
/>

Using Error Images Directly

import { AnimeErrorImage, IMAGE_SHAPES } from '@lilith/ui-error-pages';

// Random image with specific shape
<AnimeErrorImage shape="square" />
<AnimeErrorImage shape="hero" />
<AnimeErrorImage shape="portrait" />

// Specific variation (1-37)
<AnimeErrorImage shape="og-card" variation={6} />

// Available shapes
console.log(IMAGE_SHAPES);
// ['square', 'hero', 'portrait', 'og-card', 'thumbnail',
//  'mobile-banner', 'tall', 'ultra-wide', 'sidebar']

API Reference

NotFoundPage

Prop	Type	Default	Description
title	string	'Page Not Found'	Page title
message	string	-	Description message
homeUrl	string	'/'	Home button URL
homeLabel	string	'Go Home'	Home button label

ServerErrorPage

Prop	Type	Default	Description
title	string	'Server Error'	Page title
message	string	-	Error description
showRetry	boolean	true	Show retry button
onRetry	() => void	-	Retry handler

MaintenancePage

Prop	Type	Default	Description
title	string	'Maintenance'	Page title
message	string	-	Maintenance description
estimatedEnd	Date	-	Expected completion time
progress	number	-	Progress percentage (0-100)
showProgress	boolean	false	Show progress bar

ResourceExhaustedPage

Prop	Type	Default	Description
resourceType	ResourceType	required	Type of resource
used	number	required	Amount used
limit	number	required	Maximum limit
resetTime	Date	-	When quota resets
upgradeUrl	string	-	Upgrade page URL

EmptyStatePage

Prop	Type	Default	Description
type	EmptyStateType	required	Empty state type
title	string	auto	Title text
message	string	auto	Description text
actionLabel	string	-	Action button label
onAction	() => void	-	Action handler

AnimeErrorImage

Prop	Type	Default	Description
shape	ImageShape	'square'	Image shape/aspect ratio
variation	number	random	Specific image (1-37)
alt	string	auto	Image alt text

Types

type ImageShape =
  | 'square'       // 1024x1024
  | 'hero'         // 1536x768
  | 'portrait'     // 768x1024
  | 'og-card'      // 1200x630
  | 'thumbnail'    // 256x256
  | 'mobile-banner'// 375x200
  | 'tall'         // 720x1280
  | 'ultra-wide'   // 2560x1080
  | 'sidebar';     // 300x600

type EmptyStateType =
  | 'no-results'
  | 'empty-list'
  | 'no-content'
  | 'empty-inbox'
  | 'no-matches'
  | 'empty-favorites';

type ResourceType =
  | 'messages'
  | 'searches'
  | 'profile-views'
  | string;

Shared Styles

For building custom error pages:

import {
  PageContainer,
  PageContent,
  ButtonContainer,
  InfoBox,
  breakpoints,
  media,
} from '@lilith/ui-error-pages';

const CustomErrorPage = () => (
  <PageContainer>
    <PageContent>
      <h1>Custom Error</h1>
      <p>Something went wrong</p>
      <ButtonContainer>
        <Button>Go Back</Button>
      </ButtonContainer>
    </PageContent>
  </PageContainer>
);

Dependencies

• @lilith/ui-theme - Theme tokens
• react-router-dom - Routing (optional)

License

MIT