Landing Page Pricing Plan
- Updated on
This component displays a pricing plan (tier) with features and a call-to-action button. On smaller screens, the layout becomes a single column to ensure usability.
Meant to be used as a child of: Landing Page Pricing Section
Usage
import { LandingPricingPlan } from '@/components/landing/pricing/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>
Examples
With Price suffix
For some pricing plans, you may want to add a suffix to the price, like /mo or /year etc.
With highlighted plan
With featured plan
Featured plans are meant to stand out and are usually used for more expensive / enterprise plans.
With discount
Sold out
API Reference
Prop NameProp TypeRequiredDefault childrenReact.ReactNode Yes- title string No- titleComponent React.ReactNode No- description string No- descriptionComponent React.ReactNode No- href string No "#" onClick () => void No () => {} ctaText string No "Get started" price string Yes- discountPrice string No- priceSuffix string No- featured boolean No- highlighted boolean No- soldOut boolean No-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.