Pricing & Comparison
Pricing & Comparison
Conversion-focused components for pricing pages and competitive comparison sections.
Components
<XCardPricing />
A pricing tier card with a large price figure, feature checklist, optional badge, and a full-width CTA button. The highlighted prop inverts the card to a dark surface — intended for the recommended or most popular tier. Use inside XCardGrid with :columns="3" for a standard three-tier pricing layout.
<XCardGrid :columns="3" gap="md">
<XCardPricing
title="Membership"
description="Everything you need to understand your body."
price="$5.99"
period="/mo"
:features="[
'Sleep analysis',
'Activity tracking',
'Readiness score',
'Period prediction',
'Stress monitoring'
]"
:cta="{ label: 'Get started', to: '/membership' }"
/>
<XCardPricing
title="Membership+"
description="Advanced insights and priority support."
price="$9.99"
period="/mo"
badge="Most popular"
:highlighted="true"
:features="[
'Everything in Membership',
'Cardiovascular age',
'VO₂ max estimation',
'Personalized coaching',
'Priority support'
]"
:cta="{ label: 'Get Membership+', to: '/membership-plus' }"
/>
<XCardPricing
title="Family"
description="Share with up to 5 members."
price="$14.99"
period="/mo"
:features="[
'Everything in Membership+',
'Up to 5 accounts',
'Family dashboard',
'Shared goals'
]"
:cta="{ label: 'Get Family plan', to: '/family' }"
/>
</XCardGrid>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | — | Tier name (required) |
description | string | — | Short tier description |
price | string | — | Price display string, e.g. "$9.99" (required) |
period | string | '/mo' | Billing period label appended after the price |
features | string[] | — | List of feature strings rendered as a checklist (required) |
cta | { label: string; to: string } | — | Full-width CTA button |
highlighted | boolean | false | Inverts card to dark surface with accent ring — use for the recommended tier |
badge | string | — | Small pill badge above the tier name (e.g. "Most popular") |
<XCardComparison />
A "Us vs Them" feature comparison table. The "ours" column is styled with a dark inverted surface (rounded top and bottom corners), while the "theirs" column is muted. Each feature row can use a boolean value (renders a check or X icon) or a string value (renders the text directly). Optional logo icons can be displayed in each column header.
<XCardComparison
title="Why choose us?"
description="See how we compare to the competition."
our-label="Oura"
their-label="Competitor"
our-logo="i-lucide-circle"
:features="[
{ name: 'Sleep stage tracking', ours: true, theirs: true },
{ name: 'Cardiovascular age', ours: true, theirs: false },
{ name: 'Period prediction', ours: true, theirs: false },
{ name: 'Battery life', ours: '7 days', theirs: '2 days' },
{ name: 'Form factor', ours: 'Ring', theirs: 'Wristband' },
{ name: 'Skin temperature sensing', ours: true, theirs: false }
]"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
features | ComparisonFeature[] | — | Array of feature rows (required) |
title | string | — | Optional heading above the table |
description | string | — | Optional subheading below the title |
ourLabel | string | 'Us' | Column header label for "our" product |
theirLabel | string | 'Them' | Column header label for competitor |
ourLogo | string | — | UIcon name displayed in the "ours" column header |
theirLogo | string | — | UIcon name displayed in the "theirs" column header |
ComparisonFeature type:
interface ComparisonFeature {
name: string
ours: boolean | string
theirs: boolean | string
}
When a value is boolean, the cell renders a check icon (i-lucide-check) or X icon (i-lucide-x). When a value is a string, the text is displayed directly in the cell.
AI Context
package: "nuxt-x-cards"
prefix: XCard
components:
- XCardPricing
- XCardComparison
use-when: >
Use XCardPricing in 2- or 3-column XCardGrid layouts on pricing pages.
Set highlighted: true on the recommended tier. Use XCardComparison on
landing pages for competitive differentiation sections — it works well
as a standalone full-width card below a feature grid.
notes:
- XCardPricing highlighted tier uses dark surface with accent-gold check icons
- XCardComparison boolean values render as icons; string values render as text
- XCardComparison "ours" column has rounded top and bottom matching the dark panel
- Both components do not depend on useXCards() global defaults