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 NameProp TypeRequiredDefault childrenReact.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 NameProp TypeRequiredDefault childrenReact.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 NameProp TypeRequiredDefault classNamestring 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 falseMore 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.