$99 launch price

Components

Pricing Section

Pro

Free

Discover what the product can do for you.

$0

/ month

  • No credit card needed
  • Free grants
  • Private projects
  • Unlimited collaborators
  • 5 subdomains
  • Cloud hosting
  • Community support

Pro

Designed for fast-moving teams building together in real time.

was $25now $23

/ month, billed annually

  • Unlimited users
  • Free grants
  • All Free features
  • 100 Pro credits
  • Credit rollovers
  • On-demand credit top-ups
  • Unlimited subdomains
  • Custom domains
  • User roles & permissions
  • Remove the badge
  • Email support

Business

Advanced controls and power features for growing departments.

was $50now $46

/ month, billed annually

  • Unlimited users
  • Free grants
  • All Pro features
  • 100 Business credits
  • Team workspace
  • Role-based access
  • Internal publish
  • SSO
  • Security center
  • Priority support

Enterprise

Built for large orgs needing flexibility, scale, and governance.

Platform fee

  • Volume based pricing
  • Unlimited users
  • All Business features
  • Directory sync (SCIM)
  • Audit logs
  • Scheduled security scans
  • Data residency
  • Named CSM, onboarding and deployment
  • Custom SLA

Installation

ProRequires a Planes Pro license.
npx shadcn add @useplanes/pricing-section

Works once the @useplanes registry is set up in your project (one-time). After that, copy and run commands directly.

Unlock with Planes Pro

$99 once · 142 Pro components · lifetime updates.

I have a licenseGet Pro
import { PricingSection } from "@/components/ui/PricingSection";

<PricingSection
  defaultBilling="yearly"
  yearlyBadge="1 month free"
  plans={[
    {
      id: "pro",
      name: "Pro",
      description: "For teams shipping together.",
      tiers: [{ label: "100 credits", monthly: 25, yearly: 23 }],
      cta: "Get started",
      highlighted: true,
      features: [{ label: "All Free features", strong: true }, "Custom domains"],
    },
  ]}
  onSelect={(plan, billing, tier) => checkout(plan.id, billing, tier)}
/>

Use cases

  • SaaS pricing page

    Free, Pro, Business and Enterprise side by side with an annual discount.

  • Usage-based plans

    Credit or seat tiers per plan, where the select drives the price.

  • Contact-sales tier

    An enterprise card with a platform-fee label and a demo CTA instead of a number.