Public Roadmap Coming SoonPRO

Comingsoon78: Public Roadmap Coming Soon

A pre-launch section that publishes remaining work instead of a date, with an image tile floating a live release tracker over hairline rows marked shipped, in testing, or queued.

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

Base UI flavor

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

This installs the block to components/beste/block/comingsoon78.tsx, the progress16 tracker piece it floats on the tile (installed to components/beste/piece/progress16.tsx), and the badge23 component it uses for the eyebrow.

Quick start

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

import { Comingsoon78, comingsoon78Demo } from "@/components/beste/block/comingsoon78";

export default function RoadmapPage() {
  return <Comingsoon78 {...comingsoon78Demo} />;
}

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

import { Comingsoon78 } from "@/components/beste/block/comingsoon78";
import { Progress16 } from "@/components/beste/piece/progress16";

export default function RoadmapPage() {
  return (
    <Comingsoon78
      badge={{ label: "Built in the open" }}
      heading="Not finished, and here is exactly what is left"
      description="We publish the remaining work rather than a launch date."
      media={
        <Progress16
          title="Road to general release"
          steps={["Core", "Billing", "Multi-site", "Open"]}
          activeIndex={2}
          caption="Multi-site is in testing with three practices right now."
        />
      }
      image={{ src: "/backdrops/blue.jpg", alt: "Soft blue gradient backdrop" }}
      statusLabels={{ done: "Shipped", building: "In testing", queued: "Queued" }}
      items={[
        {
          title: "Scheduling and the waiting list",
          description: "Rooms, rotas, reminders, and automatic backfill of cancellations.",
          status: "done",
          date: "Shipped Nov 2025",
        },
        {
          title: "Public API and webhooks",
          description: "Read and write access to appointments and invoices.",
          status: "queued",
          date: "Next after launch",
        },
      ]}
      footnote="We move things on this list rather than removing them."
    />
  );
}

Props

type Status = "done" | "building" | "queued";

type RoadmapItem = {
  title: string;
  description: string;
  status: Status;
  date: string;
};

Behavior notes

• Status drives three things from one union: the icon (Check, Loader, Circle), the node style beside the title, and the pill colour. Adding a fourth status means extending the statusIcons and statusStyles tables in the installed file, not just the type.
• statusLabels is a full Record, so every status needs a word. Leaving one out shows an empty pill rather than falling back to the status key.
• The status pills are text plus colour, never colour alone, which is what keeps the three states distinguishable without relying on hue.
• The node markers are aria-hidden because the pill on the right already states the status in words.
• The Loader icon is static here. It is used as a shape rather than a spinner, so nothing animates and the row stays calm.
• Rows are a 2fr to 1fr split from md with the status column right-aligned, and stack below md with the pill landing under the description.
• Rows use border-t with last:border-b, so the roadmap closes at the bottom, and footnote sits outside those rules as an author's note.