Planned Downtime Window

Error22: Planned Downtime Window

A monochrome maintenance page: the downtime window is set as a ruled three-column record, and a rounded notify field takes an address for the all-clear, swapping to a confirmed state once it is submitted.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/error22?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/error22?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/error22.tsx, plus the badge7 design-system primitive it renders the parenthetical eyebrow through.

Quick start

The installed file exports error22Demo alongside the block: the exact props behind the preview above. Spread it to get a working maintenance page in one line.

import { Error22, error22Demo } from "@/components/beste/block/error22";

export default function Maintenance() {
  return <Error22 {...error22Demo} />;
}

Then replace the demo with your own window. Times are plain strings, so the format and timezone stay yours:

import { Error22 } from "@/components/beste/block/error22";

export default function Maintenance() {
  return (
    <Error22
      badge={{ label: "Back Soon" }}
      heading="We have taken the site down <strong>on purpose</strong>."
      description="A planned upgrade is running. Nothing is broken and nothing was lost."
      labels={{
        windowTitle: "The window",
        placeholder: "your address",
        success: "Thank you. We will write the moment everything is up.",
        note: "A single message when service returns, then nothing further.",
      }}
      rows={[
        { title: "Paused", value: "14:00 UTC" },
        { title: "Back by", value: "17:30 UTC" },
        { title: "Reason", value: "Storage migration" },
      ]}
      link={{ label: "Follow progress", href: "/status" }}
    />
  );
}

Props

type Error22Labels = {
  windowTitle?: string;
  placeholder?: string;
  success?: string;
  note?: string;
};

type WindowRow = {
  title: string;
  value: string;
};

type ActionLink = {
  label: string;
  href: string;
};

Behavior notes

• The notify field is a controlled input inside a real form. Submitting prevents the default action and, when the value is not blank, replaces the whole field with the confirmation pill. There is no network call and no submit callback, so wire the address to your own list before shipping.
• The confirmation is local to the mount and one way: the field, the placeholder and the note do not come back for that visit.
• The window is a ruled dl, three columns from the sm breakpoint up, with each pair under its own top border rather than in a boxed cell.
• The placeholder doubles as the field's aria-label, and the circular submit control carries its own written label for screen readers.
• heading is injected with dangerouslySetInnerHTML and accepts inline HTML; text inside <strong> drops to muted grey. Keep the value under your own control, never user input.