Componentfeedback0.55 KB gzipZero dependencies

Maintenance Page

Intermission notice with ETA.

Preview

Live Preview

Intermission

Polishing the brass rails

The box office is on a short break. Your stubs are safe.

Back at 21:00

Installation

Tokens guide →

Add to your project via CLI (zero dependencies, code you own):

npx bigbullui add maintenance-page

Or install the full npm package:

npm install bigbullui

Usage

Open in StackBlitz

import { MaintenancePage } from "@/components/ui/maintenance-page";

<MaintenancePage />

Usage guidance

Use Maintenance Page when a ticket stub surface needs Intermission notice with ETA. Keep props minimal and prefer composition with sibling stubs.

Avoid Maintenance Page for long form flows or dense data grids where a dedicated layout block fits better.

Source code

maintenance-page.tsx

Zero dependencies (only React + utils). Copy and paste directly into your project:

"use client";

import * as React from "react";
import { cn } from "./lib/utils";

export interface MaintenancePageProps extends React.HTMLAttributes<HTMLDivElement> {
  eta?: string;
}

/** Maintenance page: intermission notice with ETA chip. */
export function MaintenancePage({ eta = "Back at 21:00", className, ...props }: MaintenancePageProps) {
  return (
    <div className={cn("flex w-full max-w-md flex-col items-center rounded-lg border-2 border-foreground bg-card p-8 text-center", className)} {...props}>
      <p className="rounded-full border border-dashed border-border px-3 py-1 font-mono text-[10px] uppercase tracking-widest text-muted-foreground">
        Intermission
      </p>
      <h3 className="mt-3 text-lg font-black">Polishing the brass rails</h3>
      <p className="mt-1 max-w-xs text-sm text-muted-foreground">The box office is on a short break. Your stubs are safe.</p>
      <span className="mt-4 rounded-md bg-accent/10 px-3 py-1.5 font-mono text-xs font-bold text-accent">{eta}</span>
    </div>
  );
}