Back to Sections

Pricing

A full landing-page pricing block: three tiers side by side behind a real Monthly/Yearly switch that counts every price to its new value in place. Distinct from the Cards category's single-tier Pricing Card, which is one billing-settings card rather than a whole page section.

Pricing

Plans that scale with you

Every plan ships the whole component library. Move up when your team outgrows the seats, not before.

MonthlyYearly2 months free

Starter

For solo builders shipping side projects.

$12/mo

  • 3 active projects
  • Community support
  • 1 editor seat
  • Weekly updates
Popular

Pro (recommended)

For product teams shipping to real users.

$29/mo

  • Unlimited projects
  • Priority support
  • 5 editor seats
  • Custom domains

Team

For organizations that need control.

$59/mo

  • Everything in Pro
  • SSO & audit log
  • 20 editor seats
  • Dedicated manager
Sectionssectionpricinglandingmarketingtoggle
Stack: React + Tailwind CSS + shadcn/ui — every prompt is written for this stack and is most accurate in it.
Dependencies: lucide-react

Overview

Live price tween

One rAF loop counts all three tiers to the new interval in sync

Equal heights

Fixed h-6 badge slot on every tier + mt-auto CTA, never taller

Contained glow

Popular tier is overflow-hidden; the blur never leaves the card

One-accent discipline

Primary only on the switch, the Popular tier, and its CTA

Prompt