Choose your access level. Early supporters get permanent perks that won't be available after public launch.
Free access when we launch publicly
Get early beta access with extras
Lifetime perks for our earliest supporters
All early access purchases are fully refundable before launch
Coming soon section with tiered early access plans showing benefits, features, and availability for each level. Perfect for building a monetized waitlist with founding member perks.
A centered coming-soon section that stacks an eyebrow badge, heading, description, and a pulsing spots-left line above a responsive grid of early-access tier cards, each listing a price, an included-or-excluded feature list, and a linked call-to-action button, closed by an optional footer note.
Upgrade to Pro
Pro blocks install through the shadcn CLI with your license key and ship their full source. Docs and live previews stay open to everyone, so you can read every block's details first.
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/comingsoon14?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/comingsoon14?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/comingsoon14.tsx.
The installed file exports comingsoon14Demo alongside the block: the exact props behind the preview above. Spread it to get a working tier grid in one line.
import { ComingSoon14, comingsoon14Demo } from "@/components/beste/block/comingsoon14";
export default function Page() {
return <ComingSoon14 {...comingsoon14Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { ComingSoon14 } from "@/components/beste/block/comingsoon14";
export default function Page() {
return (
<ComingSoon14
badge={{ label: "Early access", variant: "secondary" }}
heading="Get in before everyone else"
description="Choose your access level. Early supporters get permanent perks."
tiers={[
{
name: "Waitlist",
description: "Free access at public launch",
price: "Free",
features: [
{ text: "Access at public launch", included: true },
{ text: "Early access to beta", included: false },
],
cta: { label: "Join waitlist", href: "/waitlist" },
},
{
name: "Priority",
description: "Early beta access with extras",
price: "$29",
priceNote: "one-time",
features: [
{ text: "Access at public launch", included: true },
{ text: "Early access to beta", included: true },
],
highlighted: true,
badge: "Popular",
cta: { label: "Get priority access", href: "/priority" },
},
]}
labels={{
spotsLeft: "Only {spots} founding member spots remaining",
footerText: "All early access purchases are fully refundable before launch.",
}}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
badge | { label: string; variant?: "default" | "secondary" | "outline" } | – | Eyebrow badge rendered above the heading via the shadcn Badge, defaulting to the default variant |
heading | string | – | Section heading |
description | string | – | Supporting paragraph under the heading |
tiers | AccessTier[] | [] | Early-access tier cards, each with a price, feature list, and linked CTA |
labels | { spotsLeft?: string; footerText?: string } | – | The pulsing spots-left line and the footer note |
className | string | – | Extra classes for the outer <section> |
interface TierFeature {
text: string;
included: boolean;
}
interface AccessTier {
name: string;
description: string;
price?: string;
priceNote?: string;
features: TierFeature[];
highlighted?: boolean;
badge?: string;
cta: {
label: string;
href: string;
};
}highlighted set gets a primary ring and tinted surface, and its CTA button switches from the outline to the default variant.included is true and a muted dot when false, dimming the excluded feature's text.Button renders asChild around a Next.js <Link href={tier.cta.href} />, so it always points at a URL rather than firing a handler.labels.spotsLeft is set, replacing the {spots} token with the hardcoded value 47; the price block and its note, the tier ribbon badge, and the footer each render only when their field is present.comingsoon7
Coming soon section with a vertical timeline showing launch phases, dates, and status indicators. Perfect for communicating a clear release plan and keeping users informed about upcoming milestones.
comingsoon6
Coming soon section with an email waitlist input, stacked subscriber avatars, and a live join count. Perfect for building early traction and social proof before launch.
comingsoon71
A referral coming-soon section with a centered square eyebrow and heading, a referral progress bar, a list of reward tiers with locked and unlocked states, and a dark seal share button.
comingsoon1
Coming soon section with a live countdown timer showing days, hours, minutes, and seconds until launch. Perfect for product launches, event announcements, or building anticipation for new features.