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 popularFor 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' }"
orientation="vertical"
align="bottom"
:features="['One developer', 'Unlimited projects', 'Unlimited minor & patch updates', 'Lifetime access']"
/>
</template>
Slots
header
{}
title
{}
description
{}
features
{}
bottom
{}
footer
{}
Props
title
string
undefineddescription
string
undefinedui
any
{}align
"top" | "bottom"
"bottom"button
any
undefinedorientation
"vertical" | "horizontal"
"vertical"features
string[]
[]badge
any
undefinedprice
string
undefineddiscount
string
undefinedcycle
string
undefinedhighlight
boolean
falsescale
boolean
falseConfig
{
wrapper: 'relative flex flex-col self-stretch w-full',
highlight: 'ring-2 ring-primary dark:ring-primary',
scale: 'lg:scale-[1.1] lg:z-10',
rounded: 'rounded-xl',
body: {
base: 'flex-1 gap-6 lg:gap-x-8 xl:gap-x-10 flex flex-col',
padding: 'p-6 lg:p-8 xl:p-10'
},
inner: 'flex items-center gap-3',
title: 'text-2xl text-gray-900 dark:text-white sm:text-3xl font-semibold truncate',
description: 'text-sm sm:text-base text-gray-500 dark:text-gray-400 mt-2',
amount: {
base: 'flex flex-row items-baseline gap-x-1',
discount: 'text-gray-500 dark:text-gray-400 line-through text-xl sm:text-2xl font-medium',
price: 'text-gray-900 dark:text-white text-2xl sm:text-4xl font-semibold',
cycle: 'text-gray-500 dark:text-gray-400 text-sm/6 font-medium truncate'
},
features: {
vertical: 'space-y-3 text-sm',
horizontal: 'grid lg:grid-cols-2 text-sm gap-3',
item: {
base: 'flex items-center gap-x-3 min-w-0',
label: 'text-gray-600 dark:text-gray-400 truncate',
icon: {
base: 'w-5 h-5 flex-shrink-0 text-primary',
name: 'i-heroicons-check-circle-20-solid'
}
}
},
divider: 'my-6 lg:my-8',
left: '',
right: ''
}