Sections

Pricing Table

A marketing-grade pricing section with a sliding billing toggle, direction-aware price rolls, staggered card entrances, and a highlighted popular tier.

All components

Starter

$9/mo

For solo makers shipping their first project.

1 project
Community support
Basic analytics
1 GB storage

Pro

Team

$79/mo

For teams collaborating on serious products.

Everything in Pro
Unlimited members
SSO & audit logs
1 TB storage
Dedicated success manager

Installation

Coming soon. Components will be available via the registry once checkout goes live.

Usage

<PricingTable
  onSelect={(tierId, billing) => checkout(tierId, billing)}
/>

// or with your own tiers:
<PricingTable
  tiers={[
    { id: "starter", name: "Starter", monthly: 9, yearly: 90, description: "For individuals", features: ["1 project", "Email support"] },
    { id: "pro", name: "Pro", monthly: 29, yearly: 290, description: "For teams", features: ["Unlimited projects", "Priority support"], highlighted: true },
  ]}
/>

Props

Prop	Type	Default	Description
tiers	PricingTier[]	—	Tier definitions: id, name, monthly, yearly, description, features, highlighted?, cta?. Defaults to a 3-tier demo.
onSelect	(tierId: string, billing: "monthly" \| "yearly") => void	—	Fired when a CTA is clicked.
className	string	—	Tailwind classes on the section.

Use cases

SaaS pricing pages
The full pricing section — toggle, price rolls, popular tier — in one drop-in.
Plan upgrade modals
In-app upsell surfaces that match your marketing site.
Agency packages
Service tiers with feature comparisons.
API pricing
Usage-tier presentation with annual-discount emphasis.