Feedback

Status Page

Beautifully sequenced full-screen animated status and error page.

Interactive Playground

Choose a status, animation preset, or compact layout option to instantly preview the sequence of the StatusPage component. Use the replay button to see the Apple Keynote style stagger transitions.

Select Status:

Animation Preset:

Compact Layout:

Page not found

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

'use client'

import React from 'react'
import { StatusPage, Icon } from 'biibaos'
import { Sparkles } from 'lucide-react'

export default function App() {
  return (
    <div style={{ height: '100vh', width: '100%' }}>
      <StatusPage
        status="404"
        animationPreset="expressive"
        action={{
          label: 'Back to Safety',
          onClick: () => console.log('Primary action clicked')
        }}
      />
    </div>
  )
}

Expressive Spring Stagger Preset

The expressive sequence implements progressive, timed spring delays that focus user attention on the primary elements sequentially, matching high-end Apple-style design rhythms.

You're all set

Everything went through successfully.

'use client'

import React from 'react'
import { StatusPage } from 'biibaos'

export default function SuccessScreen() {
  return (
    <div style={{ height: '400px', width: '100%', overflow: 'hidden', position: 'relative' }}>
      <StatusPage
        status="success"
        fullPage={false}
        animationPreset="expressive"
        action={{ label: 'Continue' }}
      />
    </div>
  )
}

Compact Panel Placement

For embedding inside dashboard panels, sidebar sections, or mini pages, set compact={true} to shrink padding, text proportions, and default icon dimensions.

Nothing here yet

There's nothing to show here at the moment.

You're offline

Check your internet connection and try again.

'use client'

import React from 'react'
import { StatusPage } from 'biibaos'

export default function CompactPanels() {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px' }}>
      <div style={{ height: '320px', border: '1px solid var(--biiba-border)', overflow: 'hidden', position: 'relative' }}>
        <StatusPage
          status="empty"
          fullPage={false}
          compact
          action={{ label: 'Refresh Page', variant: 'secondary' }}
        />
      </div>
      
      <div style={{ height: '320px', border: '1px solid var(--biiba-border)', overflow: 'hidden', position: 'relative' }}>
        <StatusPage
          status="offline"
          fullPage={false}
          compact
          action={{ label: 'Retry Connection', variant: 'secondary' }}
        />
      </div>
    </div>
  )
}

Properties

Prop	Type	Default	Description
`status`	`'404' \| '401' \| '403' \| '500' \| '503' \| 'maintenance' \| 'offline' \| 'success' \| 'empty' \| 'custom'`	required	Pre-configured error/status visual option
`title`	`string`	undefined	Custom header title (overrides default)
`description`	`string`	undefined	Custom description text (overrides default)
`icon`	`React.ReactNode`	undefined	Custom header icon component (overrides default)
`action`	`object`	undefined	Primary action object containing label, variant, onClick, and optional href anchor destination
`secondaryAction`	`object`	undefined	Optional secondary action displayed as ghost button below primary action
`fullPage`	`boolean`	true	Configures full viewport height rendering
`compact`	`boolean`	false	Reduced text scale and padding for embedded layouts
`animationPreset`	`'none' \| 'subtle' \| 'expressive'`	'expressive'	Defines timing and curve delays for sequentially animated elements

Progress

Empty