Marketing block

Three-Plan Pricing Toggle

Three plans with a monthly/yearly switch, yearly prices derived from the monthly figure so the two can never disagree.

192 lineslucide-reactAdded 8 Aug 2026Updated 11 Sept 2026

pricing
plans
billing
toggle
subscription

What's included

components/pricing-tiers.tsx
Needs lucide-react

Works with

React
Next.js
Tailwind CSS
TypeScript

npx hoverlab add pricing-tiers

Or over MCP, from your editor's agent — no account needed.

License

Free to read, copy and install, for personal and non-commercial projects. Shipping it in client work or a paid product needs Pro ($79 once). The source lands in your repo and stops being ours — no attribution, nothing to upgrade.

Was this useful?

Start a page with this section — add more, order them, and leave with the page source.

Preview

Simple, honest pricing

Start free. Upgrade when it starts paying for itself.

MonthlyYearlySave 20%

Free

Everything you need to try it properly.

Free

Up to 3 projects
Community support
Core component library

Pro

For working developers shipping real products.

$19/month

Unlimited projects
Commercial license
The full library
Priority email support
Figma source files

Team

Shared access and billing for a whole team.

$49/month

Everything in Pro
Up to 10 seats
Shared component presets
SSO and audit log
Invoice billing

Rendered live in your current theme — this is the same component whose source is below, not a screenshot of it.

Source

components/pricing-tiers.tsx

'use client'

/**
 * <PricingTiers> — a three-plan pricing table with a monthly/yearly toggle.
 *
 * The toggle is state rather than two pre-rendered tables, so the highlight
 * ring, the feature lists and the CTA copy stay in one place. Yearly prices
 * are derived from the monthly figure via `yearlyDiscount` — quoting both
 * numbers independently is how pricing pages end up contradicting
 * themselves after a change.
 *
 * The featured plan is raised with a ring and a badge rather than by
 * scaling it, which would knock the three CTAs out of horizontal alignment.
 */

import * as React from 'react'
import { Check } from 'lucide-react'

export interface PricingPlan {
  name: string
  /** Monthly price in whole currency units. `0` renders as "Free". */
  monthly: number
  description: string
  features: string[]
  cta?: string
  featured?: boolean
}

export interface PricingTiersProps {
  plans?: PricingPlan[]
  heading?: string
  subheading?: string
  currency?: string
  /** Fraction off when billed yearly, e.g. `0.2` for two months free. */
  yearlyDiscount?: number
  className?: string
}

const DEFAULT_PLANS: PricingPlan[] = [
  {
    name: 'Free',
    monthly: 0,
    description: 'Everything you need to try it properly.',
    features: ['Up to 3 projects', 'Community support', 'Core component library'],
    cta: 'Start free',
  },
  {
    name: 'Pro',
    monthly: 19,
    description: 'For working developers shipping real products.',
    features: [
      'Unlimited projects',
      'Commercial license',
      'The full library',
      'Priority email support',
      'Figma source files',
    ],
    cta: 'Go Pro',
    featured: true,
  },
  {
    name: 'Team',
    monthly: 49,
    description: 'Shared access and billing for a whole team.',
    features: [
      'Everything in Pro',
      'Up to 10 seats',
      'Shared component presets',
      'SSO and audit log',
      'Invoice billing',
    ],
    cta: 'Contact sales',
  },
]

export function PricingTiers({
  plans = DEFAULT_PLANS,
  heading = 'Simple, honest pricing',
  subheading = 'Start free. Upgrade when it starts paying for itself.',
  currency = '$',
  yearlyDiscount = 0.2,
  className = '',
}: PricingTiersProps) {
  const [yearly, setYearly] = React.useState(false)

  const priceOf = (plan: PricingPlan) => {
    if (plan.monthly === 0) return 'Free'
    const monthly = yearly ? plan.monthly * (1 - yearlyDiscount) : plan.monthly
    return `${currency}${Math.round(monthly)}`
  }

  return (
    <section className={`mx-auto w-full max-w-7xl px-4 py-16 sm:px-6 lg:px-8 ${className}`}>
      <div className="mx-auto mb-10 max-w-2xl text-center">
        <h2 className="text-balance text-3xl font-bold tracking-tight sm:text-4xl">
          {heading}
        </h2>
        {subheading ? <p className="mt-3 text-muted-foreground">{subheading}</p> : null}
      </div>

      {/* Billing period toggle */}
      <div className="mb-12 flex items-center justify-center gap-3">
        <span className={yearly ? 'text-sm text-muted-foreground' : 'text-sm font-semibold'}>
          Monthly
        </span>
        <button
          type="button"
          role="switch"
          aria-checked={yearly}
          aria-label="Bill yearly"
          onClick={() => setYearly((v) => !v)}
          className="relative h-6 w-11 shrink-0 rounded-full border border-border/60 bg-muted transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 aria-checked:bg-primary"
        >
          <span
            aria-hidden
            className={`absolute top-0.5 h-4 w-4 rounded-full border border-transparent bg-background shadow transition-all ${
              yearly ? 'start-6' : 'start-0.5'
            }`}
          />
        </button>
        <span className={yearly ? 'text-sm font-semibold' : 'text-sm text-muted-foreground'}>
          Yearly
          <span className="ms-1.5 rounded-full bg-emerald-500/15 px-2 py-0.5 text-xs font-semibold text-emerald-600 dark:text-emerald-400">
            Save {Math.round(yearlyDiscount * 100)}%
          </span>
        </span>
      </div>

      <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
        {plans.map((plan) => (
          <div
            key={plan.name}
            className={`relative flex min-w-0 flex-col rounded-2xl border bg-card/80 p-6 backdrop-blur transition-shadow hover:shadow-lg ${
              plan.featured
                ? 'border-primary/40 shadow-lg ring-1 ring-primary/30'
                : 'border-border/60'
            }`}
          >
            {plan.featured ? (
              <span className="absolute -top-3 left-1/2 -translate-x-1/2 rounded-full bg-primary px-3 py-1 text-xs font-semibold text-primary-foreground">
                Most popular
              </span>
            ) : null}

            <h3 data-stress-ignore className="text-lg font-bold tracking-tight">{plan.name}</h3>
            <p className="mt-1 text-sm text-muted-foreground">{plan.description}</p>

            {/* Wraps: `priceOf` is whatever currency the caller passes, and a
                four-figure non-dollar price next to /month is wider than a
                third-width card’s content box. */}
            <div className="mt-5 flex min-w-0 flex-wrap items-baseline gap-x-1 gap-y-1">
              <span className="min-w-0 break-words text-4xl font-extrabold tracking-tight">{priceOf(plan)}</span>
              {plan.monthly > 0 ? (
                <span className="text-sm text-muted-foreground">/month</span>
              ) : null}
            </div>
            {plan.monthly > 0 && yearly ? (
              <p className="mt-1 text-xs text-muted-foreground">
                {currency}
                {Math.round(plan.monthly * 12 * (1 - yearlyDiscount))} billed yearly
              </p>
            ) : null}

            <ul className="mt-6 flex-1 space-y-3">
              {plan.features.map((f) => (
                <li key={f} className="flex items-start gap-2 text-sm">
                  <Check
                    aria-hidden
                    className="mt-0.5 h-4 w-4 shrink-0 text-emerald-500"
                  />
                  <span className="text-muted-foreground">{f}</span>
                </li>
              ))}
            </ul>

            <button
              type="button"
              className={`mt-8 w-full rounded-xl px-4 py-2.5 text-sm font-semibold transition-colors ${
                plan.featured
                  ? 'bg-primary text-primary-foreground hover:bg-primary/90'
                  : 'border border-border/60 bg-background hover:bg-muted'
              }`}
            >
              {plan.cta ?? 'Get started'}
            </button>
          </div>
        ))}
      </div>
    </section>
  )
}

Before you paste

Styling is Tailwind utility classes on semantic tokens (bg-card, text-muted-foreground) — it inherits your theme instead of overriding it.
Install: npm i lucide-react
Every prop has a default, so it renders standalone before you wire it up.

Where it goes

Drop it at components/pricing-tiers.tsx and import it where you need the section:

import { PricingTiers } from '@/components/pricing-tiers'

Customize

4 of this block’s props are simple enough to drive from here. Change them and the block below re-renders — it is the same component whose source is above, not a mock of it. Everything else it accepts is in the table underneath.

Props

Read out of the component’s own type and signature, so this cannot drift from the source below. Every prop has a default — the component renders standalone before you pass it anything.

Prop	Type	Default
`plans`	`PricingPlan[]`	`DEFAULT_PLANS`
`heading`	`string`	`'Simple, honest pricing'`
`subheading`	`string`	`'Start free. Upgrade when it starts paying fo…`
`currency`	`string`	`'$'`
`yearlyDiscount`Fraction off when billed yearly, e.g. `0.2` for two months free.	`number`	`0.2`
`className`	`string`	`''`

Not using React?

The same block rendered once to markup, wrapped as a file your framework compiles. Tailwind classes are framework-agnostic, so the design transfers intact — the behaviour does not.

This block is interactive. The markup below is its initial state with the event handlers stripped — you will need to re-wire the behaviour in your framework.

pricing-tiers.html

<!--
  Three-Plan Pricing Toggle — markup from the Hoverlab catalog.

  This is the block rendered once to HTML and wrapped as a component
  file. It is not a port of the React source: the Tailwind classes carry
  the design, which is the part that took the work, and they are the same
  in every framework.

  This block is interactive in React and the handlers are NOT here.
  Buttons, toggles and menus render in their initial state and do
  nothing until you wire them up.
-->
<section class="mx-auto w-full max-w-7xl px-4 py-16 sm:px-6 lg:px-8 ">
  <div class="mx-auto mb-10 max-w-2xl text-center">
    <h2 class="text-balance text-3xl font-bold tracking-tight sm:text-4xl">Simple, honest pricing</h2>
    <p class="mt-3 text-muted-foreground">Start free. Upgrade when it starts paying for itself.</p>
  </div>
  <div class="mb-12 flex items-center justify-center gap-3">
    <span class="text-sm font-semibold">Monthly</span>
    <button type="button" role="switch" aria-checked="false" aria-label="Bill yearly" class="relative h-6 w-11 shrink-0 rounded-full border border-border/60 bg-muted transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 aria-checked:bg-primary">
      <span aria-hidden="true" class="absolute top-0.5 h-4 w-4 rounded-full border border-transparent bg-background shadow transition-all start-0.5"></span>
    </button>
    <span class="text-sm text-muted-foreground">Yearly<span class="ms-1.5 rounded-full bg-emerald-500/15 px-2 py-0.5 text-xs font-semibold text-emerald-600 dark:text-emerald-400">Save 20%</span></span>
  </div>
  <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
    <div class="relative flex min-w-0 flex-col rounded-2xl border bg-card/80 p-6 backdrop-blur transition-shadow hover:shadow-lg border-border/60">
      <h3 data-stress-ignore="true" class="text-lg font-bold tracking-tight">Free</h3>
      <p class="mt-1 text-sm text-muted-foreground">Everything you need to try it properly.</p>
      <div class="mt-5 flex min-w-0 flex-wrap items-baseline gap-x-1 gap-y-1">
        <span class="min-w-0 break-words text-4xl font-extrabold tracking-tight">Free</span>
      </div>
      <ul class="mt-6 flex-1 space-y-3">
        <li class="flex items-start gap-2 text-sm">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check mt-0.5 h-4 w-4 shrink-0 text-emerald-500" aria-hidden="true">
            <path d="M20 6 9 17l-5-5"></path>
          </svg>
          <span class="text-muted-foreground">Up to 3 projects</span>
        </li>
        <li class="flex items-start gap-2 text-sm">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check mt-0.5 h-4 w-4 shrink-0 text-emerald-500" aria-hidden="true">
            <path d="M20 6 9 17l-5-5"></path>
          </svg>
          <span class="text-muted-foreground">Community support</span>
        </li>
        <li class="flex items-start gap-2 text-sm">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check mt-0.5 h-4 w-4 shrink-0 text-emerald-500" aria-hidden="true">
            <path d="M20 6 9 17l-5-5"></path>
          </svg>
          <span class="text-muted-foreground">Core component library</span>
        </li>
      </ul>
      <button type="button" class="mt-8 w-full rounded-xl px-4 py-2.5 text-sm font-semibold transition-colors border border-border/60 bg-background hover:bg-muted">Start free</button>
    </div>
    <div class="relative flex min-w-0 flex-col rounded-2xl border bg-card/80 p-6 backdrop-blur transition-shadow hover:shadow-lg border-primary/40 shadow-lg ring-1 ring-primary/30">
      <span class="absolute -top-3 left-1/2 -translate-x-1/2 rounded-full bg-primary px-3 py-1 text-xs font-semibold text-primary-foreground">Most popular</span>
      <h3 data-stress-ignore="true" class="text-lg font-bold tracking-tight">Pro</h3>
      <p class="mt-1 text-sm text-muted-foreground">For working developers shipping real products.</p>
      <div class="mt-5 flex min-w-0 flex-wrap items-baseline gap-x-1 gap-y-1">
        <span class="min-w-0 break-words text-4xl font-extrabold tracking-tight">$19</span>
        <span class="text-sm text-muted-foreground">/month</span>
      </div>
      <ul class="mt-6 flex-1 space-y-3">
        <li class="flex items-start gap-2 text-sm">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check mt-0.5 h-4 w-4 shrink-0 text-emerald-500" aria-hidden="true">
            <path d="M20 6 9 17l-5-5"></path>
          </svg>
          <span class="text-muted-foreground">Unlimited projects</span>
        </li>
        <li class="flex items-start gap-2 text-sm">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check mt-0.5 h-4 w-4 shrink-0 text-emerald-500" aria-hidden="true">
            <path d="M20 6 9 17l-5-5"></path>
          </svg>
          <span class="text-muted-foreground">Commercial license</span>
        </li>
        <li class="flex items-start gap-2 text-sm">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check mt-0.5 h-4 w-4 shrink-0 text-emerald-500" aria-hidden="true">
            <path d="M20 6 9 17l-5-5"></path>
          </svg>
          <span class="text-muted-foreground">The full library</span>
        </li>
        <li class="flex items-start gap-2 text-sm">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check mt-0.5 h-4 w-4 shrink-0 text-emerald-500" aria-hidden="true">
            <path d="M20 6 9 17l-5-5"></path>
          </svg>
          <span class="text-muted-foreground">Priority email support</span>
        </li>
        <li class="flex items-start gap-2 text-sm">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check mt-0.5 h-4 w-4 shrink-0 text-emerald-500" aria-hidden="true">
            <path d="M20 6 9 17l-5-5"></path>
          </svg>
          <span class="text-muted-foreground">Figma source files</span>
        </li>
      </ul>
      <button type="button" class="mt-8 w-full rounded-xl px-4 py-2.5 text-sm font-semibold transition-colors bg-primary text-primary-foreground hover:bg-primary/90">Go Pro</button>
    </div>
    <div class="relative flex min-w-0 flex-col rounded-2xl border bg-card/80 p-6 backdrop-blur transition-shadow hover:shadow-lg border-border/60">
      <h3 data-stress-ignore="true" class="text-lg font-bold tracking-tight">Team</h3>
      <p class="mt-1 text-sm text-muted-foreground">Shared access and billing for a whole team.</p>
      <div class="mt-5 flex min-w-0 flex-wrap items-baseline gap-x-1 gap-y-1">
        <span class="min-w-0 break-words text-4xl font-extrabold tracking-tight">$49</span>
        <span class="text-sm text-muted-foreground">/month</span>
      </div>
      <ul class="mt-6 flex-1 space-y-3">
        <li class="flex items-start gap-2 text-sm">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check mt-0.5 h-4 w-4 shrink-0 text-emerald-500" aria-hidden="true">
            <path d="M20 6 9 17l-5-5"></path>
          </svg>
          <span class="text-muted-foreground">Everything in Pro</span>
        </li>
        <li class="flex items-start gap-2 text-sm">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check mt-0.5 h-4 w-4 shrink-0 text-emerald-500" aria-hidden="true">
            <path d="M20 6 9 17l-5-5"></path>
          </svg>
          <span class="text-muted-foreground">Up to 10 seats</span>
        </li>
        <li class="flex items-start gap-2 text-sm">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check mt-0.5 h-4 w-4 shrink-0 text-emerald-500" aria-hidden="true">
            <path d="M20 6 9 17l-5-5"></path>
          </svg>
          <span class="text-muted-foreground">Shared component presets</span>
        </li>
        <li class="flex items-start gap-2 text-sm">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check mt-0.5 h-4 w-4 shrink-0 text-emerald-500" aria-hidden="true">
            <path d="M20 6 9 17l-5-5"></path>
          </svg>
          <span class="text-muted-foreground">SSO and audit log</span>
        </li>
        <li class="flex items-start gap-2 text-sm">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check mt-0.5 h-4 w-4 shrink-0 text-emerald-500" aria-hidden="true">
            <path d="M20 6 9 17l-5-5"></path>
          </svg>
          <span class="text-muted-foreground">Invoice billing</span>
        </li>
      </ul>
      <button type="button" class="mt-8 w-full rounded-xl px-4 py-2.5 text-sm font-semibold transition-colors border border-border/60 bg-background hover:bg-muted">Contact sales</button>
    </div>
  </div>
</section>

This is rendered HTML, not a translation of the React source. The Tailwind classes carry the design and work in any framework.
It is one frame: the component in its initial state, with no props applied beyond the defaults.
This block is interactive in React — toggles, menus or form state. None of that survives here; the markup is the closed/default state and the handlers are gone. Re-wire them in your own framework.
Requires Tailwind, and the design tokens the classes reference (bg-card, text-muted-foreground, and so on). The template ZIPs ship a globals.css that defines them.

What each framework gets across the whole catalog — effects convert properly; this rung is markup.

For AI

The component, its props, the design tokens it expects and the command that installs it — as one prompt. Paste it into Claude, Cursor, v0 or ChatGPT and what they build around it will match the rest of the catalog instead of inventing its own system.

See the prompt

Used in these pages

Want the whole screen instead of this one section? Open a page and copy it entire.

7 more blocks in Pricing

All of them free to read, copy and install — no account, no locked tiles, no watermarked preview. The whole catalog is open, and so are the API and the CLI.

Browse Pricing

Shipping one commercially

Copying the code is free. Putting it in client work or a paid product is what Pro is for — the licence, not the access.

A commercial licence for everything in the catalog
Unlimited bundle exports, in Vue, Svelte and Tailwind
One payment — no subscription, nothing to renew

Pro — $79 once

More Pricing blocks

View category

One price, paid once

No subscription, no seat count, no tier above this one to discover later.

Pro

$79one-time

Get Pro

The licence to ship what you have is permanent. What runs for twelve months is access to components published after you buy — nothing you already copied stops working, and nothing checks at runtime.

What is included

Every effect, block, page and template
Unlimited projects, including client work
Twelve months of catalog updates
CLI, MCP server and public API
No seat fee on people who see what you ship
No attribution required, ever

Single-Plan Price Card

One price given a whole card, with the objection a one-time price raises answered under the button rather than in a FAQ further down.

Pricing145 lines1 dep10 Sept

Tiered Usage Calculator

A slider that turns a rate card into the number a buyer actually cares about, with a per-tier breakdown so the total can be checked rather than taken on trust.

Pricing224 linesNo deps13 Sept

Compare plans

Every line, side by side.

Compare plans — features by plan
Feature	Free	ProPopular	Team
Projects	3	Unlimited	Unlimited
Commercial license	Not included	Included	Included
Full component library	Not included	Included	Included
Figma source files	Not included	Included	Included
Seats	1	1	Up to 10
SSO and audit log	Not included	Not included	Included
Support	Community	Priority email	Dedicated

Plan Comparison Matrix

A real table with scoped headers, a sticky first column and screen-reader text behind every check and dash.

Pricing145 lines1 dep11 Sept

Credits

Buy what you need, once

No plan to join and nothing that renews. Top up whenever the balance runs low, or never again.

One credit is one generation at standard quality. High quality costs four.

500 credits
$5
$0.010 per credit
Enough to finish an evaluation.
Buy 500
Most bought
2,000 credits
$15Save 25%
$0.0075 per credit
What a working month looks like for one person.
Buy 2,000
10,000 credits
$60Save 40%
$0.006 per credit
For a small team, or a batch job with a deadline.
Buy 10,000

Credits never expire
No subscription, no card kept on file
Unused credits are refundable for 30 days

Prepaid Credit Packs

One-time packs with the per-credit price worked out for the reader and the saving stated rather than implied — the pricing shape for a product that sells quantity, not a subscription.

Pricing218 lines1 dep11 Sept

Change your plan

Changes take effect immediately. Downgrades credit the unused remainder against your next invoice.

In-App Plan Picker

A native radiogroup of plans with the current one disabled and the prorated charge announced as it changes — the upgrade dialog, not the marketing table.

Pricing242 lines1 dep2 Sept

Why this price

Cheaper than the week you would spend instead

A price defends itself against the alternative, not against a competitor's price. The alternative here is engineering time, so that is the unit.

One section, hand-builtHalf a day for the markup, another for the responsive and keyboard passes.
The same section hereOne command, and the accessibility decisions are already made and explained.
Where it stops being closeAround the fourth section. Before that, honestly, build it yourself.
What you are not buyingA dependency. The source lands in your repository and stops being ours.

Pricing Value Split

The case for the price, made beside the price — what the alternative costs, in the units a buyer already measures.

Pricing158 linesNo deps

What runs out, and what happens then

Pricing tables list what a plan includes. They rarely say what happens at the limit, which is the thing that decides whether a limit is survivable.

Plan Limits List

What actually runs out on each plan, including what happens when it does — the row a pricing table leaves off.

Pricing149 linesNo deps10 Sept