Section: Pricing

Display pricing plans in a comparison card layout. Supports highlighting a recommended plan, feature lists, and CTA buttons.

Props

Name	Type	Required	Description	Default
`label`	string	No	Small label above heading	—
`heading`	string	No	Section heading	—
`description`	string	No	Section description	—
`plans`	array	Yes	Array of plan objects	—
`plans[].name`	string	Yes	Plan name (e.g., "Free", "Pro")	—
`plans[].price`	string	Yes	Price display (e.g., "$0", "$29/mo")	—
`plans[].description`	string	No	Short plan description	—
`plans[].features`	array	Yes	List of feature strings	—
`plans[].ctaText`	string	No	Button label	—
`plans[].ctaHref`	string	No	Button link	—
`plans[].highlighted`	boolean	No	Visually highlight this plan	`false`
`className`	string	No	Custom CSS class	—

Layout

Plans are displayed as side-by-side cards. The highlighted plan gets a visual accent (border color, badge) to draw attention. Works best with 2-4 plans.

Minimal Example

{
  "type": "pricing",
  "plans": [
    {
      "name": "Free",
      "price": "$0",
      "features": ["10 pages", "1 project", "Community support"]
    },
    {
      "name": "Pro",
      "price": "$29/mo",
      "features": ["Unlimited pages", "5 projects", "Priority support"],
      "highlighted": true
    }
  ]
}

Full Example

{
  "type": "pricing",
  "label": "Pricing",
  "heading": "Simple, Transparent Pricing",
  "description": "Start free. Upgrade when you need more.",
  "plans": [
    {
      "name": "Free",
      "price": "$0",
      "description": "Perfect for side projects and experiments.",
      "features": [
        "10 pages per project",
        "1 project",
        "All page types",
        "Community support",
        "pagegun.com subdomain"
      ],
      "ctaText": "Get Started",
      "ctaHref": "/signup"
    },
    {
      "name": "Pro",
      "price": "$29/mo",
      "description": "For growing products and teams.",
      "features": [
        "Unlimited pages",
        "5 projects",
        "Custom domains",
        "Data Mode",
        "Priority support",
        "Webhooks",
        "Remove branding"
      ],
      "ctaText": "Start Free Trial",
      "ctaHref": "/signup?plan=pro",
      "highlighted": true
    },
    {
      "name": "Enterprise",
      "price": "Custom",
      "description": "For large-scale deployments.",
      "features": [
        "Everything in Pro",
        "Unlimited projects",
        "SLA guarantee",
        "Dedicated support",
        "Custom integrations",
        "SSO / SAML"
      ],
      "ctaText": "Contact Sales",
      "ctaHref": "/contact"
    }
  ]
}

Pricing Design Tips

Highlight one plan: The plan you want most users to choose. Usually the mid-tier.
Use 3 plans: The "decoy effect" — a high-priced plan makes the mid-tier feel like great value
Feature differentiation: Make it clear what each tier adds. Don't repeat obvious features.
CTA text: Use different text per plan — "Get Started" (free), "Start Trial" (paid), "Contact Sales" (enterprise)
Price anchoring: Show the highest plan first or last, not in the middle

Placement

Pricing sections work as:

Standalone pricing page — The main content of a /pricing page
Landing page section — Near the end, after features and testimonials