Pricing Plan Explorer

ComingSoon41: Pricing Plan Explorer

An interactive Polaris pricing-preview section centered on a square eyebrow and heading, with a plan switcher that swaps a detail card showing a blurred locked price, accent-checked features, and a dark seal notify 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/comingsoon41?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

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

Quick start

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

import { ComingSoon41, comingsoon41Demo } from "@/components/beste/block/comingsoon41";

export default function Page() {
  return <ComingSoon41 {...comingsoon41Demo} />;
}

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

import { ComingSoon41 } from "@/components/beste/block/comingsoon41";

export default function Page() {
  return (
    <ComingSoon41
      label="Pricing Preview"
      labels={{
        priceCaption: "Full pricing revealed at launch",
        priceSuffix: "/mo",
        featuresTitle: "What's included",
      }}
      heading="Take a look at the plans."
      description="Switch between plans to see what each one gives you."
      plans={[
        {
          name: "Solo",
          summary: "For one maker keeping everything in one place.",
          teasedPrice: "9",
          features: ["A single workspace", "Unlimited projects"],
        },
        {
          name: "Studio",
          summary: "For small teams shipping together.",
          teasedPrice: "29",
          tag: "Most popular",
          features: ["Everything in Solo", "Up to ten seats"],
        },
      ]}
      button={{ label: "Notify Me On Pricing", href: "/notify" }}
    />
  );
}

Props

type PlanItem = {
  name: string;
  summary: string;
  teasedPrice: string;
  tag?: string;
  features: string[];
};

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

type ComingSoon41Labels = {
  priceCaption?: string;
  priceSuffix?: string;
  featuresTitle?: string;
};

Behavior notes

• A useState active index drives a role="tablist" plan switcher; clicking a tab swaps the visible detail card, and there is no email form on this block.
• The detail card renders only when plans is non-empty and a plan is resolved at the active index, so the whole switcher collapses when you pass no plans.
• The teasedPrice is rendered aria-hidden behind a blur-[9px] select-none filter, prefixed with a $ and followed by labels.priceSuffix, so the number reads as a locked, unreadable teaser.
• A Lock icon sits beside labels.priceCaption under the price, and plan.tag renders a bg-primary uppercase pill next to the plan name when present.
• Each feature renders with an accent Check badge in a list under labels.featuresTitle.
• The button renders as a real navigation via Button1 asChild wrapping a Next.js <Link href={button.href} /> with the dark tone, so it points at a URL rather than firing a handler.