Nuxt UI Pro v1.0 is out with dashboard components! Discount ends in 7 hours.

PricingCard

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' }"
    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
undefined
description
string
undefined
ui
{}
{}
button
any
undefined
align
"top" | "bottom"
"bottom"
orientation
"vertical" | "horizontal"
"vertical"
features
string[]
[]
badge
any
undefined
price
string
undefined
discount
string
undefined
cycle
string
undefined
highlight
boolean
false
scale
boolean
false

Config

{
  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: ''
}