Maintenance Window Notice

Error17: Maintenance Window Notice

A planned-downtime page: three bordered cells state the maintenance window and what it affects, a working notify-me field collects an address for the all-clear, and a link points at live progress.

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/error17?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

This installs the block to components/beste/block/error17.tsx, plus the badge6 design-system primitive it renders the square eyebrow through.

Quick start

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

import { Error17, error17Demo } from "@/components/beste/block/error17";

export default function Maintenance() {
  return <Error17 {...error17Demo} />;
}

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

import { Error17 } from "@/components/beste/block/error17";

export default function Maintenance() {
  return (
    <Error17
      label="Scheduled Maintenance"
      code="503"
      heading="We are rebuilding the engine <strong>while it is parked</strong>."
      description="Everything is paused for a planned upgrade. Your data is where you left it."
      labels={{
        placeholder: "Where should we write?",
        success: "Noted. You will hear from us the moment we are live again.",
        note: "One message, sent once.",
      }}
      stats={[
        { title: "Paused since", value: "14:00 UTC" },
        { title: "Expected back", value: "17:30 UTC" },
        { title: "Affected", value: "Dashboard and API" },
      ]}
      link={{ label: "Watch live progress", href: "/status" }}
    />
  );
}

Props

type Error17Labels = {
  placeholder?: string;
  success?: string;
  note?: string;
};

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

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

Behavior notes

• The email field is a controlled input inside a real form. Submitting prevents the default action and, when the value is not blank, swaps the whole form for the success message. There is no network call and no submit callback, so wire the address to your own list before shipping.
• The success state is local to the mount and cannot be reversed from the UI: once submitted, the form, the placeholder and the note are gone for that visit.
• The stats row is a three-column grid from the sm breakpoint up, so passing three cells fills a row exactly; fewer cells simply leave the row short.
• The placeholder doubles as the field's aria-label, so the input is still named when the label text is the only thing describing it.
• heading is injected with dangerouslySetInnerHTML and accepts inline HTML; <strong> takes the accent colour. Keep the value under your own control, never user input.