nuxt-x-marketing
PricingPlans
Tiered pricing card grid built on Nuxt UI UPricingPlans, with monthly/yearly billing toggle and social proof badge support.
PricingPlans
Renders plan cards with price, description, feature list, and a CTA button per plan. Built on top of Nuxt UI's UPricingPlans. An optional billing toggle lets users switch between monthly and yearly prices. Plans flagged with popular: true are highlighted. Social proof badges can be shown above or below the plans.
Components
<XMarkPricingPlans />
<XMarkPricingPlans
:has-billing-toggle="true"
:yearly-discount="20"
:scale="true"
:plans="[
{
name: 'Starter',
price: '$9',
period: '/month',
description: 'Perfect for solo developers.',
features: ['5 projects', '10 GB storage', 'Email support'],
button: { label: 'Get Started', to: '/signup?plan=starter' },
},
{
name: 'Pro',
price: '$29',
period: '/month',
description: 'For growing teams.',
features: ['Unlimited projects', '100 GB storage', 'Priority support'],
button: { label: 'Get Pro', to: '/signup?plan=pro' },
popular: true,
},
{
name: 'Enterprise',
price: '$99',
period: '/month',
description: 'Custom solutions at scale.',
features: ['Unlimited everything', 'Dedicated support', 'SLA'],
button: { label: 'Contact Sales', to: '/contact' },
},
]"
:badges="['no-credit-card', 'cancel-anytime']"
badges-position="bottom"
badges-align="center"
variant="outline"
@select="onPlanSelect"
/>
You can also pass price as an object to enable seamless monthly/yearly switching:
{
name: 'Pro',
price: { monthly: '$29', yearly: '$279' },
features: [...],
}
When price is an object and hasBillingToggle is true, the billing cycle label automatically switches between /month and /year.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
plans | array | 3 example plans | Plan objects [{ name, price, period?, description?, features, button?, popular? }]. price may be a string or { monthly, yearly } object. |
highlighted | string | '' | Plan name to highlight (alternative to setting popular: true on a plan). |
hasBillingToggle | boolean | false | Show monthly/yearly toggle. |
yearlyDiscount | number | 10 | Percentage shown on the yearly toggle button. |
scale | boolean | false | Enlarge the highlighted plan card. Mutually exclusive with compact. |
compact | boolean | true | Remove gap between plan cards. Mutually exclusive with scale. |
variant | string | undefined | Card variant: 'soft', 'solid', 'outline', 'subtle'. |
badges | array | [] | Social proof badge presets (strings) or custom badge objects passed to XMarkSocialProofBadge. |
badgesPosition | string | 'bottom' | Badge placement: 'top', 'bottom'. |
badgesAlign | string | 'center' | Badge alignment: 'left', 'center', 'right'. |
Emits
| Event | Payload | Description |
|---|---|---|
select | plan: PricingPlan | Fired when a plan's CTA button is clicked. |
AI Context
category: Pricing
package: "@xenterprises/nuxt-x-marketing"
components:
- XMarkPricingPlans
use-when: >
Building the primary plan selection grid on a pricing page. Supports
monthly/yearly billing toggle (with either per-period strings or a
`{ monthly, yearly }` price object) and social proof badges to reduce
conversion friction. Emits `select` with the chosen plan.
typical-page-section: Dedicated pricing page, or pricing section near the bottom of a long landing page.