Landing Page Pricing Section
- Updated on
This component displays different pricing tiers with features and a call-to-action button. On smaller screens, the layout becomes a single column to ensure usability.
Also see: Landing Page Pricing Plan
Simple, scalable pricing
Affordable pricing plans tailored to your needs. Choose a plan that works best for you.
Usage
import { LandingPricingSection } from '@/components/landing/pricing/LandingPricingSection';
import { LandingPricingPlan } from '@/components/landing/pricing/LandingPricingPlan';
<LandingPricingSection
title="Simple, scalable pricing"
description="Affordable pricing plans tailored to your needs. Choose a plan that works best for you."
>
<LandingPricingPlan
title="Free"
description="For small teams & personal use."
price="$0"
>
<p>Up to 5 users</p>
<p>Basic features</p>
<p>Discord access</p>
</LandingPricingPlan>
<LandingPricingPlan
title="Pro"
description="For larger teams or businesses."
ctaText="Upgrade now"
price="$20"
priceSuffix="/mo"
highlighted
>
<p>Unlimited users</p>
<p>AI features</p>
<p>Priority support</p>
</LandingPricingPlan>
</LandingPricingSection>
Examples
Text position
Simple, scalable pricing
Affordable pricing plans tailored to your needs. Choose a plan that works best for you.
With Price suffix
For some pricing plans, you may want to add a suffix to the price, like /mo or /year etc.
Simple, scalable pricing
Affordable pricing plans tailored to your needs. Choose a plan that works best for you.
With highlighted plan
Simple, scalable pricing
Affordable pricing plans tailored to your needs. Choose a plan that works best for you.
With featured plan
Featured plans are meant to stand out and are usually used for more expensive / enterprise plans.
Simple, scalable pricing
Affordable pricing plans tailored to your needs. Choose a plan that works best for you.
With discount
Simple, scalable pricing
Affordable pricing plans tailored to your needs. Choose a plan that works best for you.
Sold out
Simple, scalable pricing
Affordable pricing plans tailored to your needs. Choose a plan that works best for you.
Multiple columns
You can use the pricing section to display between 1 to 4 pricing plans. The layout will automatically adjust based on the number of plans you provide.
Simple, scalable pricing
Affordable pricing plans tailored to your needs. Choose a plan that works best for you.
Enterprise
For enterprise teams & businesses.
$100/mo
Sign upUnlimited users
AI features
Priority support
With background
Simple, scalable pricing
Affordable pricing plans tailored to your needs. Choose a plan that works best for you.
With background glow
Simple, scalable pricing
Affordable pricing plans tailored to your needs. Choose a plan that works best for you.
API Reference
| Prop Name | Prop Type | Required | Default |
|---|---|---|---|
| children | React.ReactNode | 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 |
| withAvatars | boolean | No | false |
| variant | 'primary' ǀ 'secondary' | No | 'primary' |
| backgroundGlowVariant | 'primary' ǀ 'secondary' | No | 'primary' |
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.