Landing Page Pricing Plan

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

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.