MarketingPricing
A pricing section: an optional heading block above a row of plan cards, with one tier highlightable as recommended. Each tier has a name, price, feature list, and a caller-supplied CTA. Presentational and theme-driven.
Pricing
Pricing that scales with you
Start free, upgrade when your agents do. Every plan ships the full component library.
Starter
For solo developers exploring AI-assisted UI.
$9/mo
- 1 workspace
- Up to 3 themes
- Community support
- Public component registry
Pro
For teams shipping production landing pages and apps.
$29/mo
- Unlimited workspaces
- Unlimited themes
- Private MCP server
- Priority support
- Usage analytics
Team
For organizations with compliance and SSO needs.
$99/mo
- Everything in Pro
- SAML SSO
- Audit log retention
- Dedicated solutions engineer
- 99.9% uptime SLA
Installation
pnpm dlx @hex-core/cli add marketing-pricingAPI Reference
| Prop | Type | Default | Description |
|---|---|---|---|
tiersrequired | object | — | ReadonlyArray<{ name; price; period?; description?; features: ReactNode[]; cta: ReactNode; highlighted?; badge? }>. The plan cards, rendered left-to-right. Set highlighted on the recommended tier and pass a badge for its flag. |
eyebrow | ReactNode | — | Section eyebrow above the title. |
title | ReactNode | — | Section heading. |
description | ReactNode | — | Section subcopy below the heading. |
className | string | — | Additional classes applied to the root <section>. |
AI Guidance
When to use
Use to present 2–3 subscription tiers on a landing or pricing page. Highlight the recommended tier and pass a badge. Supersedes the older 'pricing-table' recipe.
When not to use
Don't use for a single plan (use marketing-cta) or for a feature comparison matrix (use a table). Keep to ≤3 tiers — more belongs in a comparison table.
Common mistakes
- Highlighting more than one tier — the emphasis is meant to steer toward a single recommended plan.
- Giving the highlighted tier a generic CTA label like 'Choose' — name the plan ('Choose Pro') for screen readers and analytics.
- Passing plain text as cta instead of a <Button> — you lose the full-width styling and focus ring.
Accessibility
Each tier name renders as an <h3> under the section <h2>. Feature check glyphs are aria-hidden; the feature text conveys meaning. Give generic CTAs an aria-label naming the plan.
Related components
Token budget: 750
Verified against @hex-core/components@1.12.0