Incident Banner Maintenance Window

FreeNew

A scheduled maintenance banner that changes by the clock from upcoming, with a start countdown, to in progress and to completed, without any manual update.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

title

start

end

Guide and examples

When to use it

Use this when you announce planned downtime ahead of time and want one banner that stays correct without edits.

Do not use it when the window is not known in advance (use an incident banner with manual updates).

Installation


pnpm dlx shadcn@latest add https://ui.tealmac.com/r/incident-banner-maintenance-window.json

It composes incident-banner, which the CLI installs for you.

Usage

import { IncidentBannerMaintenanceWindow } from "@/components/incident-banner-maintenance-window"

<IncidentBannerMaintenanceWindow
  title="Database upgrade"
  start="2026-11-01T02:00:00Z"
  end="2026-11-01T03:00:00Z"
/>

Props

Prop	Type	Required	Description
`title`	`string`	required	-
`start`	`string`	required	ISO start and end.
`end`	`string`	required	-
`now`	`() => number`	optional	Clock override for tests: returns ms since the epoch.

Accessibility

The phase is written as text (Scheduled, In progress, Completed).
Times are in UTC and written out.
The banner is a status region, not an alert, because maintenance is expected.

Testing

The pattern ships with a Testing Library test (incident-banner-maintenance-window.test.tsx) that covers upcoming, in progress, completed and moving between phases.