Readiness Status Dashboard

ComingSoon8: Readiness Status Dashboard

A centered coming-soon section that stacks a badge, heading, description, and a templated ready-count line above a set of grouped status cards, where each service lists a color-coded state icon, name, status pill, and description.

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

Base UI flavor

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

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

Quick start

The installed file exports comingsoon8Demo alongside the block: the exact props behind the preview above. Spread it to get a working status dashboard in one line.

import { ComingSoon8, comingsoon8Demo } from "@/components/beste/block/comingsoon8";

export default function Page() {
  return <ComingSoon8 {...comingsoon8Demo} />;
}

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

import { ComingSoon8 } from "@/components/beste/block/comingsoon8";

export default function Page() {
  return (
    <ComingSoon8
      badge={{ label: "Launch status", variant: "secondary" }}
      heading="Almost ready for takeoff"
      description="Track our progress across every part of the platform."
      groups={[
        {
          title: "Core platform",
          services: [
            {
              name: "Authentication & SSO",
              description: "OAuth, SAML, and passwordless login",
              status: "ready",
            },
            {
              name: "API gateway",
              description: "REST and GraphQL endpoints with rate limiting",
              status: "in-progress",
            },
          ],
        },
        {
          title: "Integrations",
          services: [
            {
              name: "Zapier & Make",
              description: "No-code automation workflows",
              status: "planned",
            },
          ],
        },
      ]}
      labels={{
        ready: "Ready",
        inProgress: "In progress",
        planned: "Planned",
        overallStatus: "{ready} of {total} services ready",
      }}
    />
  );
}

Props

type ServiceStatus = "ready" | "in-progress" | "planned";

interface Service {
  name: string;
  description: string;
  status: ServiceStatus;
}

interface ServiceGroup {
  title: string;
  services: Service[];
}

Behavior notes

• The ready-count line flattens every group's services, counts those with status === "ready" against the total, and interpolates both into labels.overallStatus by replacing the {ready} and {total} tokens.
• Each service looks up a statusConfig entry keyed by its status to pick the state icon (CheckCircle2, Loader2, or Circle) and its color; the in-progress icon spins via animate-spin.
• The status pill text comes from getStatusLabel, mapping each state to the matching labels string with "Ready", "In Progress", and "Planned" fallbacks.
• The group container switches layout by count: one or two groups flex-center in a row, exactly three use md:grid-cols-3, and four or more use a two-to-four column grid.
• The count line renders only when there are services and the group cards render only when there are groups; the badge, heading, and description 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; uses the shadcn Badge primitive for the eyebrow and lucide icons for the per-service states.