Pro

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
<template>
  <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']"
  />
</template>

Slots

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

Props

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

Page

A dynamic grid layout for your pages.

PricingGrid

A customizable grid for your PricingCard components.