Landing Page Price Comparison
- Updated on
A versatile price comparison section that enables you to showcase feature differences across multiple products or services. Perfect for SaaS feature comparison pages, product comparisons, and feature matrices.
The component supports 2-5 comparison columns, each with customizable headers, feature lists, and optional footers. Featured columns can be highlighted to draw attention to preferred options.
How we compare
See how our product stacks up against the competition
Competitor A
Competitor B
Usage
import {
LandingPriceComparisonSection,
LandingPriceComparisonColumn,
LandingPriceComparisonItem,
} from '@/components/landing';
<LandingPriceComparisonSection
title="Product Comparison"
description="Compare features across different plans"
>
<LandingPriceComparisonColumn
featured
header="Premium Plan"
footer="$99/month"
>
<LandingPriceComparisonItem
state="check"
text="All features included"
/>
</LandingPriceComparisonColumn>
</LandingPriceComparisonSection>
Examples
Featured Column Highlighting & CTA
Any column can be featured, but only one column can be featured at a time.
Why choose us?
Competitor A
Competitor B
With Tooltips and Descriptions
Feature Comparison
Detailed comparison with helpful tooltips
Professional
Standard
Secondary Variant
The secondary variant provides an alternative color scheme for the comparison section.
Compare Plans
Choose the plan that's right for you
Basic
Enterprise
Without Price
Perfect for feature comparisons where pricing is not the focus.
Feature Comparison
See how different solutions stack up
Solution A
Solution B
Without Button or footer
Clean comparison tables without call-to-action buttons for informational purposes.
Product Specifications
Technical comparison of our products
Starter Edition
Professional Edition
Enterprise Edition
With Background
Adds a subtle background to make the comparison section stand out from the rest of the page.
Service Tiers
Choose the right level of service for your needs
Enterprise
With Background Glow
Creates an eye-catching glow effect that draws attention to the comparison section.
Platform Comparison
See why developers choose our platform
Other Platforms
Custom Icons and Content
Service Tiers
API Reference
LandingPriceComparisonSection
| Prop Name | Prop Type | Required | Default |
|---|---|---|---|
| children | React.ReactNode | Yes | - |
| className | string | No | - |
| title | string | React.ReactNode | No | - |
| titleComponent | React.ReactNode | No | - |
| description | string | React.ReactNode | No | - |
| descriptionComponent | React.ReactNode | No | - |
| textPosition | 'center' | 'left' | No | 'center' |
| withBackground | boolean | No | false |
| withBackgroundGlow | boolean | No | false |
| variant | 'primary' | 'secondary' | No | 'primary' |
| backgroundGlowVariant | 'primary' | 'secondary' | No | 'primary' |
LandingPriceComparisonColumn
| Prop Name | Prop Type | Required | Default |
|---|---|---|---|
| children | React.ReactNode | Yes | - |
| className | string | No | - |
| header | string | React.ReactNode | No | - |
| headerComponent | React.ReactNode | No | - |
| footer | string | React.ReactNode | No | - |
| footerComponent | React.ReactNode | No | - |
| featured | boolean | No | false |
| ctaText | string | No | - |
| ctaTextComponent | React.ReactNode | No | - |
| href | string | No | - |
| onClick | () => void | No | - |
| variant | 'primary' | 'secondary' | No | 'primary' |
LandingPriceComparisonItem
| Prop Name | Prop Type | Required | Default |
|---|---|---|---|
| className | string | No | - |
| icon | React.ReactNode | No | - |
| iconComponent | React.ReactNode | No | - |
| text | string | React.ReactNode | No | - |
| textComponent | React.ReactNode | No | - |
| description | string | React.ReactNode | No | - |
| descriptionComponent | React.ReactNode | No | - |
| state | 'check' | 'cross' | 'neutral' | 'custom' | No | 'neutral' |
| showText | boolean | No | false |
| showDescription | boolean | No | false |
More Examples
For more even more examples, see our Landing Page Component Examples page or see complete landing page examples by Exploring Our Landing Page Templates.
Also see:
- Pricing Section component for traditional pricing tables.
- Product Feature component for highlighting individual features.
- Feature List component for listing product capabilities.