The PricingPlan component provides a flexible way to display a pricing plan with customizable content including title, description, price, features, etc.
Use the PricingPlans component to display multiple pricing plans in a responsive grid layout.
Use the title prop to set the title of the PricingPlan.
<template>
<UPricingPlan title="Solo" class="w-96" />
</template>
Use the description prop to set the description of the PricingPlan.
<template>
<UPricingPlan title="Solo" description="For bootstrappers and indie hackers." />
</template>
Use the badge prop to display a Badge next to the title of the PricingPlan.
<template>
<UPricingPlan
title="Solo"
description="For bootstrappers and indie hackers."
badge="Most popular"
/>
</template>
You can pass any property from the Badge component to customize it.
<template>
<UPricingPlan
title="Solo"
description="For bootstrappers and indie hackers."
:badge="{
label: 'Most popular',
color: 'neutral',
variant: 'solid'
}"
/>
</template>
Use the price prop to set the price of the PricingPlan.
<template>
<UPricingPlan title="Solo" description="For bootstrappers and indie hackers." price="$249" />
</template>
Use the discount prop to set a discounted price that will be displayed alongside the original price (which will be shown with a strikethrough).
<template>
<UPricingPlan
title="Solo"
description="For bootstrappers and indie hackers."
price="$249"
discount="$199"
/>
</template>
Use the billing-cycle and/or billing-period props to display the billing information of the PricingPlan.
<template>
<UPricingPlan
title="Solo"
description="For bootstrappers and indie hackers."
price="$9"
billing-cycle="/month"
billing-period="billed annually"
/>
</template>
Use the features prop as an array of string to display a list of features on the PricingPlan:
<template>
<UPricingPlan
title="Solo"
description="For bootstrappers and indie hackers."
price="$249"
:features="[
'One developer',
'Unlimited projects',
'Access to GitHub repository',
'Unlimited patch & minor updates',
'Lifetime access'
]"
/>
</template>
You can customize this icon globally in your app.config.ts under ui.icons.success key.
You can customize this icon globally in your vite.config.ts under ui.icons.success key.
You can also pass an array of objects with the following properties:
title: stringicon?: string<script setup lang="ts">
const features = ref([
{
title: 'One developer',
icon: 'i-lucide-user'
},
{
title: 'Unlimited projects',
icon: 'i-lucide-infinity'
},
{
title: 'Access to GitHub repository',
icon: 'i-lucide-github'
},
{
title: 'Unlimited patch & minor updates',
icon: 'i-lucide-refresh-cw'
},
{
title: 'Lifetime access',
icon: 'i-lucide-clock'
}
])
</script>
<template>
<UPricingPlan
title="Solo"
description="For bootstrappers and indie hackers."
price="$249"
:features="features"
/>
</template>
Use the button prop with any property from the Button component to display a button at the bottom of the PricingPlan.
<template>
<UPricingPlan
title="Solo"
description="For bootstrappers and indie hackers."
price="$249"
:features="[
'One developer',
'Unlimited projects',
'Access to GitHub repository',
'Unlimited patch & minor updates',
'Lifetime access'
]"
:button="{
label: 'Buy now'
}"
/>
</template>
Use the onClick field to add a click handler to trigger the plan purchase.
Use the variant prop to change the variant of the PricingPlan.
<template>
<UPricingPlan
title="Solo"
description="For bootstrappers and indie hackers."
price="$249"
:features="[
'One developer',
'Unlimited projects',
'Access to GitHub repository',
'Unlimited patch & minor updates',
'Lifetime access'
]"
:button="{
label: 'Buy now'
}"
variant="subtle"
/>
</template>
Use the orientation prop to change the orientation of the PricingPlan. Defaults to vertical.
<template>
<UPricingPlan
title="Solo"
description="For bootstrappers and indie hackers."
price="$249"
:features="[
'One developer',
'Unlimited projects',
'Access to GitHub repository',
'Lifetime access'
]"
:button="{
label: 'Buy now'
}"
orientation="horizontal"
variant="outline"
/>
</template>
Use the tagline prop to display a tagline text above the price.
<template>
<UPricingPlan
title="Solo"
description="For bootstrappers and indie hackers."
price="$249"
:features="[
'One developer',
'Unlimited projects',
'Access to GitHub repository',
'Lifetime access'
]"
:button="{
label: 'Buy now'
}"
orientation="horizontal"
tagline="Pay once, own it forever"
/>
</template>
Use the terms prop to display terms below the price.
<template>
<UPricingPlan
title="Solo"
description="For bootstrappers and indie hackers."
price="$249"
:features="[
'One developer',
'Unlimited projects',
'Access to GitHub repository',
'Lifetime access'
]"
:button="{
label: 'Buy now'
}"
orientation="horizontal"
tagline="Pay once, own it forever"
terms="Invoices and receipts available."
/>
</template>
Use the highlight prop to display a highlighted border around the PricingPlan.
<template>
<UPricingPlan
title="Solo"
description="For bootstrappers and indie hackers."
price="$249"
:features="[
'One developer',
'Unlimited projects',
'Access to GitHub repository',
'Unlimited patch & minor updates',
'Lifetime access'
]"
:button="{
label: 'Buy now'
}"
highlight
/>
</template>
Use the scale prop to make a PricingPlan bigger than the others.
Check out the PricingPlans's scale example to see how it works as it's hard to demonstrate by itself.
| Prop | Default | Type |
|---|---|---|
as |
|
The element or component this component should render as. |
title |
| |
description |
| |
badge |
Display a badge next to the title.
Can be a string or an object.
| |
billingCycle |
The unit price period that appears next to the price. Typically used to show the recurring interval. | |
billingPeriod |
Additional billing context that appears above the billing cycle. Typically used to show the actual billing frequency. | |
price |
The current price of the plan.
When used with | |
discount |
The discounted price of the plan.
When provided, the | |
features |
Display a list of features under the price. Can be an array of strings or an array of objects.
| |
button |
Display a buy button at the bottom.
| |
tagline |
Display a tagline highlighting the pricing value proposition. | |
terms |
Display terms at the bottom. | |
orientation |
|
The orientation of the pricing plan. |
variant |
|
|
highlight |
Display a ring around the pricing plan to highlight it. | |
scale |
Enlarge the plan to make it more prominent. | |
ui |
|
| Slot | Type |
|---|---|
badge |
|
title |
|
description |
|
price |
|
discount |
|
billing |
|
features |
|
button |
|
header |
|
body |
|
footer |
|
tagline |
|
terms |
|
export default defineAppConfig({
ui: {
pricingPlan: {
slots: {
root: 'relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6',
header: '',
body: 'flex flex-col min-w-0',
footer: 'flex flex-col gap-6 items-center',
titleWrapper: 'flex items-center gap-3',
title: 'text-highlighted text-2xl sm:text-3xl text-pretty font-semibold',
description: 'text-muted text-base text-pretty mt-2',
priceWrapper: 'flex items-center gap-1',
price: 'text-highlighted text-3xl sm:text-4xl font-semibold',
discount: 'text-muted line-through text-xl sm:text-2xl',
billing: 'flex flex-col justify-between min-w-0',
billingPeriod: 'text-toned truncate text-xs font-medium',
billingCycle: 'text-muted truncate text-xs font-medium',
features: 'flex flex-col gap-3 flex-1 mt-6 grow-0',
feature: 'flex items-center gap-2 min-w-0',
featureIcon: 'size-5 shrink-0 text-primary',
featureTitle: 'text-muted text-sm truncate',
badge: '',
button: '',
tagline: 'text-base font-semibold text-default',
terms: 'text-xs/5 text-muted text-center text-balance'
},
variants: {
orientation: {
horizontal: {
root: 'grid-cols-1 lg:grid-cols-3 justify-between divide-y lg:divide-y-0 lg:divide-x divide-default',
body: 'lg:col-span-2 pb-6 lg:pb-0 lg:pr-6 justify-center',
footer: 'lg:justify-center lg:items-center lg:p-6 lg:max-w-xs lg:w-full lg:mx-auto',
features: 'lg:grid lg:grid-cols-2 lg:mt-12'
},
vertical: {
footer: 'justify-end',
priceWrapper: 'mt-6'
}
},
variant: {
solid: {
root: 'bg-inverted',
title: 'text-inverted',
description: 'text-dimmed',
price: 'text-inverted',
discount: 'text-dimmed',
billingCycle: 'text-dimmed',
billingPeriod: 'text-dimmed',
featureTitle: 'text-dimmed'
},
outline: {
root: 'bg-default ring ring-default'
},
soft: {
root: 'bg-elevated/50'
},
subtle: {
root: 'bg-elevated/50 ring ring-default'
}
},
highlight: {
true: {
root: 'ring-2 ring-inset ring-primary'
}
},
scale: {
true: {
root: 'lg:scale-[1.1] lg:z-[1]'
}
}
},
compoundVariants: [
{
orientation: 'horizontal',
variant: 'soft',
class: {
root: 'divide-accented'
}
},
{
orientation: 'horizontal',
variant: 'subtle',
class: {
root: 'divide-accented'
}
}
],
defaultVariants: {
variant: 'outline'
}
}
}
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
pricingPlan: {
slots: {
root: 'relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6',
header: '',
body: 'flex flex-col min-w-0',
footer: 'flex flex-col gap-6 items-center',
titleWrapper: 'flex items-center gap-3',
title: 'text-highlighted text-2xl sm:text-3xl text-pretty font-semibold',
description: 'text-muted text-base text-pretty mt-2',
priceWrapper: 'flex items-center gap-1',
price: 'text-highlighted text-3xl sm:text-4xl font-semibold',
discount: 'text-muted line-through text-xl sm:text-2xl',
billing: 'flex flex-col justify-between min-w-0',
billingPeriod: 'text-toned truncate text-xs font-medium',
billingCycle: 'text-muted truncate text-xs font-medium',
features: 'flex flex-col gap-3 flex-1 mt-6 grow-0',
feature: 'flex items-center gap-2 min-w-0',
featureIcon: 'size-5 shrink-0 text-primary',
featureTitle: 'text-muted text-sm truncate',
badge: '',
button: '',
tagline: 'text-base font-semibold text-default',
terms: 'text-xs/5 text-muted text-center text-balance'
},
variants: {
orientation: {
horizontal: {
root: 'grid-cols-1 lg:grid-cols-3 justify-between divide-y lg:divide-y-0 lg:divide-x divide-default',
body: 'lg:col-span-2 pb-6 lg:pb-0 lg:pr-6 justify-center',
footer: 'lg:justify-center lg:items-center lg:p-6 lg:max-w-xs lg:w-full lg:mx-auto',
features: 'lg:grid lg:grid-cols-2 lg:mt-12'
},
vertical: {
footer: 'justify-end',
priceWrapper: 'mt-6'
}
},
variant: {
solid: {
root: 'bg-inverted',
title: 'text-inverted',
description: 'text-dimmed',
price: 'text-inverted',
discount: 'text-dimmed',
billingCycle: 'text-dimmed',
billingPeriod: 'text-dimmed',
featureTitle: 'text-dimmed'
},
outline: {
root: 'bg-default ring ring-default'
},
soft: {
root: 'bg-elevated/50'
},
subtle: {
root: 'bg-elevated/50 ring ring-default'
}
},
highlight: {
true: {
root: 'ring-2 ring-inset ring-primary'
}
},
scale: {
true: {
root: 'lg:scale-[1.1] lg:z-[1]'
}
}
},
compoundVariants: [
{
orientation: 'horizontal',
variant: 'soft',
class: {
root: 'divide-accented'
}
},
{
orientation: 'horizontal',
variant: 'subtle',
class: {
root: 'divide-accented'
}
}
],
defaultVariants: {
variant: 'outline'
}
}
}
})
]
})