ProComponentsPricing

PricingCard

CardGitHub

A pre-built Card with all you need to display a pricing plan.

Usage

Built on top of the Card component, the PricingCard can be used in a PricingGrid.

Use the title, description, price, discount and cycle props to customize the card.

Solo

Most popular

For bootstrappers and indie hackers.

$199

/month

  • One developer
  • Unlimited projects
  • Unlimited minor & patch updates
  • Lifetime access
<UPricingCard
  title="Solo"
  description="For bootstrappers and indie hackers."
  price="$199"
  discount=""
  cycle="/month"
  :highlight="false"
  :badge="{ label: 'Most popular' }"
  :button="{ label: 'Buy now' }"
  align="bottom"
  :features="['One developer', 'Unlimited projects', 'Unlimited minor & patch updates', 'Lifetime access']"
/>

Slots

Props

PageError

A pre-built error component with NuxtError support.

PricingGrid

A customizable grid for your PricingCard components.