nuxt-x-cards
Comparison Card
Us vs Them
Comparison Card
The XCardComparison component renders 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).
Components
<XCardComparison />
<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[] | required | Array of feature rows |
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
component: XCardComparison
package: "@xenterprises/nuxt-x-cards"
category: PricingComparison
use-when: >
Use XCardComparison on landing pages for competitive differentiation sections —
it works well as a standalone full-width card below a feature grid.
notes:
- boolean values render as icons; string values render as text
- "ours" column has rounded top and bottom matching the dark panel
- does not depend on useXCards() global defaults