The PricingPlans component provides a flexible layout to display a list of PricingPlan components using either the default slot or the plans prop.
<template>
<UPricingPlans>
<UPricingPlan
v-for="(plan, index) in plans"
:key="index"
v-bind="plan"
/>
</UPricingPlans>
</template>
The grid columns will be automatically calculated based on the number of plans, this works with the plans prop but also with the default slot.
Use the plans prop as an array of objects with the properties of the PricingPlan component.
<script setup lang="ts">
const plans = ref([
{
title: 'Solo',
description: 'Tailored for indie hackers.',
price: '$249',
features: [
'One developer',
'Lifetime access'
],
button: {
label: 'Buy now'
}
},
{
title: 'Startup',
description: 'Best suited for small teams.',
price: '$499',
features: [
'Up to 5 developers',
'Everything in Solo'
],
button: {
label: 'Buy now'
}
},
{
title: 'Organization',
description: 'Ideal for larger teams and organizations.',
price: '$999',
features: [
'Up to 20 developers',
'Everything in Startup'
],
button: {
label: 'Buy now'
}
}
])
</script>
<template>
<UPricingPlans :plans="plans" />
</template>
Use the orientation prop to change the orientation of the PricingPlans. Defaults to horizontal.
<script setup lang="ts">
const plans = ref([
{
title: 'Solo',
description: 'Tailored for indie hackers.',
price: '$249',
features: [
'One developer',
'Lifetime access'
],
button: {
label: 'Buy now'
}
},
{
title: 'Startup',
description: 'Best suited for small teams.',
price: '$499',
features: [
'Up to 5 developers',
'Everything in Solo'
],
button: {
label: 'Buy now'
}
},
{
title: 'Organization',
description: 'Ideal for larger teams and organizations.',
price: '$999',
features: [
'Up to 20 developers',
'Everything in Startup'
],
button: {
label: 'Buy now'
}
}
])
</script>
<template>
<UPricingPlans orientation="vertical" :plans="plans" />
</template>
When using the plans prop instead of the default slot, the orientation of the plans is automatically reversed, horizontal to vertical and vice versa.
Use the compact prop to reduce the padding between the plans when one of the plans is scaled for a better visual balance.
<script setup lang="ts">
const plans = ref([
{
title: 'Solo',
description: 'Tailored for indie hackers.',
price: '$249',
features: [
'One developer',
'Lifetime access'
],
button: {
label: 'Buy now'
}
},
{
title: 'Startup',
description: 'Best suited for small teams.',
price: '$499',
scale: true,
features: [
'Up to 5 developers',
'Everything in Solo'
],
button: {
label: 'Buy now'
}
},
{
title: 'Organization',
description: 'Ideal for larger teams and organizations.',
price: '$999',
features: [
'Up to 20 developers',
'Everything in Startup'
],
button: {
label: 'Buy now'
}
}
])
</script>
<template>
<UPricingPlans compact :plans="plans" />
</template>
Use the scale prop to adjust the spacing between the plans when one of the plans is scaled for a better visual balance.
<script setup lang="ts">
const plans = ref([
{
title: 'Solo',
description: 'Tailored for indie hackers.',
price: '$249',
features: [
'One developer',
'Lifetime access'
],
button: {
label: 'Buy now'
}
},
{
title: 'Startup',
description: 'Best suited for small teams.',
price: '$499',
scale: true,
features: [
'Up to 5 developers',
'Everything in Solo'
],
button: {
label: 'Buy now'
}
},
{
title: 'Organization',
description: 'Ideal for larger teams and organizations.',
price: '$999',
features: [
'Up to 20 developers',
'Everything in Startup'
],
button: {
label: 'Buy now'
}
}
])
</script>
<template>
<UPricingPlans scale :plans="plans" />
</template>
While these examples use Nuxt Content, the components can be integrated with any content management system.
Use the PricingPlans component in a page to create a pricing page:
<script setup lang="ts">
const { data: plans } = await useAsyncData('plans', () => queryCollection('plans').all())
</script>
<template>
<UPage>
<UPageHero title="Pricing" />
<UPageBody>
<UContainer>
<UPricingPlans :plans="plans" />
</UContainer>
</UPageBody>
</UPage>
</template>
In this example, the plans are fetched using queryCollection from the @nuxt/content module.
| Prop | Default | Type |
|---|---|---|
as |
|
The element or component this component should render as. |
plans |
| |
orientation |
|
The orientation of the pricing plans. |
compact |
|
When |
scale |
|
When |
| Slot | Type |
|---|---|
badge | |
title | |
description | |
price | |
discount | |
billing | |
features | |
button |
|
header | |
body | |
footer | |
tagline | |
terms |
|
default |
|
export default defineAppConfig({
ui: {
pricingPlans: {
base: 'flex flex-col gap-y-8',
variants: {
orientation: {
horizontal: 'lg:grid lg:grid-cols-[repeat(var(--count),minmax(0,1fr))]',
vertical: ''
},
compact: {
false: 'gap-x-8'
},
scale: {
true: ''
}
},
compoundVariants: [
{
compact: false,
scale: true,
class: 'lg:gap-x-13'
}
]
}
}
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
pricingPlans: {
base: 'flex flex-col gap-y-8',
variants: {
orientation: {
horizontal: 'lg:grid lg:grid-cols-[repeat(var(--count),minmax(0,1fr))]',
vertical: ''
},
compact: {
false: 'gap-x-8'
},
scale: {
true: ''
}
},
compoundVariants: [
{
compact: false,
scale: true,
class: 'lg:gap-x-13'
}
]
}
}
})
]
})