nuxt-x-marketing
PricingComparison
Side-by-side feature comparison table built on Nuxt UI UPricingTable, with social proof badges and responsive design.
PricingComparison
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.
Components
<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:
- XMarkPricingComparison
use-when: >
Adding a detailed feature matrix below the pricing plan cards for buyers
who need to compare plans side-by-side before deciding.
typical-page-section: Dedicated pricing page, below the plan cards grid.