nuxt-x-marketing
Pricing
Pricing components for displaying tiered plans and a feature comparison table, both with optional social proof badges and billing period toggle.
Pricing
Two complementary components handle the pricing section. XMarkPricingPlans renders the familiar card grid for plan selection. XMarkPricingComparison provides a detailed feature matrix for buyers who need to compare plans side-by-side. Both wrap Nuxt UI primitives (UPricingPlans / UPricingTable) and add opinionated defaults and social proof integration.
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' |
<XMarkPricingComparison />
A full-width comparison table mapping feature groups and individual features to plan columns. Uses XMarkSocialProofBadge for optional trust signals above or below the table.
<XMarkPricingComparison
:plans="[
{ id: 'starter', name: 'Starter', price: '$9/mo', button: { label: 'Get Started' } },
{ id: 'pro', name: 'Pro', price: '$29/mo', highlighted: true, button: { label: 'Get Pro' } },
{ id: 'enterprise', name: 'Enterprise', price: '$99/mo', button: { label: 'Contact Sales' } },
]"
:feature-groups="[
{
name: 'Core Features',
features: [
{ name: 'Projects', values: { starter: '5', pro: 'Unlimited', enterprise: 'Unlimited' } },
{ name: 'Storage', values: { starter: '10 GB', pro: '100 GB', enterprise: '1 TB' } },
{ name: 'Custom Domain', values: { starter: false, pro: true, enterprise: true } },
],
},
]"
:badges="['secure', 'gdpr']"
badges-position="top"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
plans | Array | 3 example plans | Plan columns [{ id, name, price?, highlighted?, button? }] |
featureGroups | Array | Example groups | Feature groups [{ name?, features: [{ name, tooltip?, values: { [planId]: boolean|string } }] }] |
caption | String | '' | Optional table caption text |
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
- XMarkPricingComparison
use-when: >
Building a pricing page. Use XMarkPricingPlans for the primary plan
selection grid. Add XMarkPricingComparison below it for buyers who
need a detailed feature matrix before deciding.
typical-page-section: Dedicated pricing page, or pricing section near the bottom of a long landing page.