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. An optional billing toggle lets users switch between monthly and yearly prices. Social proof badges can be shown above or below the plans.
Components
<XMarkPricingPlans />
Renders plan cards with price, description, feature list, and a CTA button per plan. An optional billing toggle lets users switch between monthly and yearly prices. Social proof badges can be shown above or below the plans.
<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"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
plans | Array | 3 example plans | Plan objects [{ name, price, period?, description?, features, button?, popular? }] |
highlighted | String | '' | Plan name to highlight (alternative to popular: true) |
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 |
compact | Boolean | true | Remove gap between plan cards |
variant | String | undefined | Card variant: 'soft', 'solid', 'outline', 'subtle' |
badges | Array | [] | Social proof badge presets or custom badge objects |
badgesPosition | String | 'bottom' | Badge placement: 'top', 'bottom' |
badgesAlign | String | 'center' | Badge alignment: 'left', 'center', 'right' |
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 and social proof badges to reduce
conversion friction.
typical-page-section: Dedicated pricing page, or pricing section near the bottom of a long landing page.