PricingCard

CardGitHub

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

Take a look at the SaaS template to see how you can build your own pricing page! (view source)

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
{}
{}
description
string
undefined
button
any
undefined
align
"top" | "bottom"
"bottom"
title
string
""
badge
any
undefined
features
string[]
[]
price
string
""
discount
string
undefined
cycle
string
undefined
highlight
boolean
false
scale
boolean
false

LandingTestimonial

A pre-built Card to display a testimonial in your landing pages.

PricingGrid

A customizable grid for your PricingCard components.