Maintenance mode
App settings switch that drops a maintenance banner into a live app preview and dims what's behind it, with an editable message, auto-off durations, a rolling countdown and an admin bypass.
Interactive preview · desktop · dark
Installation
Installation is available on the Startup and Business plans. Your personal install command appears here once you have access.
Usage
Import it, pass your props, and make it part of your product.
example.tsx
import { MaintenanceMode } from '@/components/component-kit/items/block-maintenance-mode';
export function Example() { return <MaintenanceMode onChange={(state) => console.log(state)} />;}Props
| Prop | Type | Default | Description |
|---|---|---|---|
defaultEnabled | boolean | false | Start in maintenance mode. |
defaultMessage | string | built-in message | Initial banner message (up to 120 characters). |
onChange | (state: { enabled: boolean; message: string; minutes: number; adminsBypass: boolean }) => void | undefined | Called whenever any setting changes; minutes is 0 for "Until off". |
compact | boolean | false | Status, switch and preview only. |
autoPlay | boolean | false | Flip maintenance on and off on a loop. |