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

header
{}
title
{}
description
{}
features
{}
footer
{}

Props

ui
{}
{}
button
any
undefined
badge
any
undefined
title
string
""
description
string
undefined
align
"top" | "bottom"
"bottom"
features
string[]
[]
price
string
""
discount
string
undefined
cycle
string
undefined
highlight
boolean
false
scale
boolean
false

PageError

A pre-built error component with NuxtError support.

PricingGrid

A customizable grid for your PricingCard components.