Fitness Studio Founding ListPRO

ComingSoon67: Fitness Studio Founding List

A Polaris fitness coming-soon section (single accent color, square eyebrow) that pairs a studio name, an eyebrow, a heading, a description, and a working founding-membership email form on the left with a card previewing a week of the class schedule on the right.

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

Base UI flavor

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

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

Quick start

The installed file exports comingsoon67Demo alongside the block: the exact props behind the preview above. Spread it to get a working founding-list page in one line.

import { ComingSoon67, comingsoon67Demo } from "@/components/beste/block/comingsoon67";

export default function Page() {
  return <ComingSoon67 {...comingsoon67Demo} />;
}

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

import { ComingSoon67 } from "@/components/beste/block/comingsoon67";

export default function Page() {
  return (
    <ComingSoon67
      brand="Meridian Studio"
      label="Founding Memberships"
      heading="A calmer place to train opens next month."
      description="Small classes, natural light, and instructors who know your name."
      classes={[
        { name: "Sunrise Flow", time: "Mon · 7:00am" },
        { name: "Strength Foundations", time: "Tue · 6:30pm" },
        { name: "Reformer Pilates", time: "Thu · 12:00pm" },
        { name: "Slow Restore", time: "Sun · 9:00am" },
      ]}
      labels={{
        scheduleTitle: "A week on the schedule",
        placeholder: "Enter your email",
        success: "You're on the list. Founding rates are yours to keep.",
        note: "First 100 members lock in half-price for life.",
      }}
    />
  );
}

Props

type ClassItem = {
  name: string;
  time: string;
};

type ComingSoon67Labels = {
  scheduleTitle?: string;
  placeholder?: string;
  success?: string;
  note?: string;
};

Behavior notes

• The founding-list form owns its email state; handleSubmit calls preventDefault and only flips to the success panel when the trimmed email is non-empty, so there is no external callback to wire.
• On submit the form swaps for a bordered success capsule with a Check icon, and the note line hides once submitted since it renders only when note is set and the form is not yet submitted.
• The schedule card renders only when classes is non-empty, listing each class as a border-topped row with its name and time.
• Every region is optional: the brand, eyebrow, heading, description, and schedule card each render only when their prop is present.
• The two columns align to the top via items-start, so the schedule card keeps its own height independent of the copy column.
• No inline markup is parsed: every string renders as plain text, so HTML passed in shows as escaped text.