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)
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.
<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>
header
- {}title
- {}description
- {}features
- {}amount
- {}cycle
- {}bottom
- {}footer
- {}title
(string) - undefineddescription
(string) - undefinedui
(any) - {}button
(Button & { click?: (…args: any[]) => void; }) - undefinedalign
(“top” | “bottom”) - “bottom”orientation
(“vertical” | “horizontal”) - “vertical”features
(string[]) - []badge
(Badge) - undefinedprice
(string) - undefineddiscount
(string) - undefinedcycle
(string) - undefinedhighlight
(boolean) - falsescale
(boolean) - false{
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: ''
}