@ossy/pages

Status and error page components for Ossy apps — ready-to-use, styled React components for common SaaS scenarios.

Installation

npm install @ossy/pages @ossy/design-system

Components

| Component | Description | |-----------|-------------| | NotFound | 404 — page not found | | Forbidden | 403 — access denied / no permission | | InternalError | 500 — unexpected server error | | Maintenance | Site under scheduled maintenance | | ComingSoon | Feature or site launching soon |

Each component also ships with a matching .page.jsx file that wraps it in a full-viewport layout with routing metadata, ready to register directly in your router.

Usage

Components

import { NotFound, Forbidden, InternalError, Maintenance, ComingSoon } from '@ossy/pages'

// Minimal — uses default copy
<NotFound />

// With custom props
<NotFound
  title="Nothing here"
  message="That page doesn't exist."
  action={{ label: 'Back home', href: '/' }}
/>

<Forbidden
  action={{ label: 'Go home', href: '/' }}
  secondaryAction={{ label: 'Sign in', href: '/sign-in' }}
/>

<Maintenance estimatedTime="2 hours" />

<ComingSoon
  message="We're building something great. Check back soon!"
  action={{ label: 'Notify me', onClick: handleNotify }}
/>

<InternalError
  action={{ label: 'Reload', onClick: () => location.reload() }}
/>

Page files

// Register the full-page version directly in your router config
import NotFoundPage from '@ossy/pages/src/not-found.page.jsx'
import ForbiddenPage from '@ossy/pages/src/forbidden.page.jsx'
import MaintenancePage from '@ossy/pages/src/maintenance.page.jsx'
import ComingSoonPage from '@ossy/pages/src/coming-soon.page.jsx'
import InternalErrorPage from '@ossy/pages/src/internal-error.page.jsx'

Prop reference

All components share these base props:

| Prop | Type | Default | Description | |------|------|---------|-------------| | logo | ReactNode | null | Logo shown above the content | | surface | string | 'base' | Design system surface token | | inset | string | 'xl' | Padding token | | gap | string | 'l' | Gap between elements | | title | string | Component default | Main heading | | message | string | Component default | Body copy | | action | object | null | Primary button — spread onto <Button>, include label for button text |

Forbidden also accepts secondaryAction (same shape as action). Maintenance and ComingSoon do not show a numeric error code. Maintenance also accepts estimatedTime (string) for downtime copy.

Peer dependencies

• react >=19.0.0
• @ossy/design-system >=1.0.0

License

MIT