Staaarter

Early Access Tiers

A centered row of tiered early-access plan cards, e.g. Founding, Early access, and Standard, each listing its perks, a feature checklist with check icons, and a static availability note like "12 of 50 spots left". The highlighted tier gets a "Most popular" badge and a filled call-to-action button.

By Staaarter Team
Coming Soon
Docs
Live preview

Docs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its badge, button dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/early-access-tiers.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/coming-soon/comingsoon14.tsx instead.

Usage

The file also exports comingsoon14Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { ComingSoon14, comingsoon14Demo } from "@/components/blocks/coming-soon/comingsoon14";

export default function Page() {
  return <ComingSoon14 {...comingsoon14Demo} />;
}

Props

PropTypeDefaultDescription
eyebrowstring"Coming soon"Small label above the heading.
headingstring"Early access tiers"Section heading.
descriptionstring"Reserve your spot now, lock in founding pricing..."Section subheading.
tiersEarlyAccessTier[]noneTier cards to render, in display order.
classNamestringnoneExtra classes for the outer section element.

Types

export interface EarlyAccessTier {
  id: string;
  name: string;
  description: string;
  features: string[];
  availability: string;
  highlighted?: boolean;
  ctaLabel?: string;
  ctaHref?: string;
}

Behavior notes

  • Fully static: a plain Server Component. "Spots left" copy and every feature list are fixed strings from props, not computed against any real inventory count.
  • The call-to-action is a link (`render={<Link href="#" />}` by default), nothing is submitted, matching the inert CTA convention used across the other block categories.