Maintenance Back SoonPRO

ComingSoon20: Maintenance Back Soon

A monochrome, editorial scheduled-maintenance section from the Auralis set that centers a pulsing status dot beside a parenthetical eyebrow, a large heading, a reassuring paragraph, a ruled key-value list of status details, and a status-page pill button.

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

Base UI flavor

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

This installs the block to components/beste/block/comingsoon20.tsx.

Quick start

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

import { ComingSoon20, comingsoon20Demo } from "@/components/beste/block/comingsoon20";

export default function Page() {
  return <ComingSoon20 {...comingsoon20Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { ComingSoon20 } from "@/components/beste/block/comingsoon20";

export default function Page() {
  return (
    <ComingSoon20
      badge={{ label: "Scheduled maintenance" }}
      heading="We're offline for a short, deliberate upgrade."
      description="We're moving to faster hardware. Nothing you've saved is affected."
      details={[
        { label: "Current status", value: "Migrating to new infrastructure" },
        { label: "Expected back", value: "Today, around 18:00 UTC" },
        { label: "Your work", value: "Untouched, backed up, and safe" },
      ]}
      button={{ label: "Watch the status page", href: "/status" }}
    />
  );
}

Props

type Badge = {
  label: string;
};

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

type DetailItem = {
  label: string;
  value: string;
};

Behavior notes

• There are no event callbacks: the button renders as a real navigation via Button12 asChild wrapping a Next.js <Link href={button.href} />, so it always points at a URL.
• The status row pairs a small animate-pulse dot with the Badge7 eyebrow, and it renders only when badge is present.
• The details are rendered as a <dl> of label and value rows with a top rule per row and a closing bottom rule, and the whole list renders only when details is non-empty.
• The section is centered in a max-w-3xl column; the eyebrow, heading, description, details, and button each render only when their prop is present.
• Every string is plain text with no inline markup parsing, so HTML passed in shows as escaped text.