Countdown Studio Card

ComingSoon26: Countdown Studio Card

A monochrome, editorial pre-launch countdown from the Auralis set that centers a parenthetical eyebrow, a bold wordmark, a heading, a live four-unit ruled countdown to a target date, and a reserve-seat pill button, all over a soft muted card.

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

Base UI flavor

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

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

Quick start

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

import { ComingSoon26, comingsoon26Demo } from "@/components/beste/block/comingsoon26";

export default function Page() {
  return <ComingSoon26 {...comingsoon26Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this. The targetDate is an ISO string:

import { ComingSoon26 } from "@/components/beste/block/comingsoon26";

export default function Page() {
  return (
    <ComingSoon26
      badge={{ label: "Counting down" }}
      wordmark="Auralis"
      heading="The studio opens the moment the clock runs out."
      targetDate="2026-10-24T09:00:00Z"
      button={{ label: "Hold my seat", href: "/waitlist" }}
      labels={{
        daysLabel: "Days",
        hoursLabel: "Hours",
        minutesLabel: "Minutes",
        secondsLabel: "Seconds",
      }}
    />
  );
}

Props

type Badge = {
  label: string;
};

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

type ComingSoon26Labels = {
  daysLabel?: string;
  hoursLabel?: string;
  minutesLabel?: string;
  secondsLabel?: string;
};

Behavior notes

• The countdown starts at zero and only ticks on the client: a useEffect parses targetDate, computes the remaining days, hours, minutes, and seconds, and refreshes every second via setInterval, clearing the timer on unmount.
• The remaining time is floored at zero with Math.max(0, target - Date.now()), so a past targetDate settles on 00 across all four units rather than going negative; each figure is zero-padded with padStart(2, "0").
• 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 four units always render as a md:grid-cols-4 ruled row; each unit caption renders only when its label is set, and the eyebrow, wordmark, heading, and button each render only when their prop is present.
• The whole card is a centered bg-muted surface, and the heading and wordmark are plain text with no inline markup parsing, so HTML passed in shows as escaped text.