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.

<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 - {}
• amount - {}
• cycle - {}
• bottom - {}
• footer - {}

Props

• title (string) - undefined
• description (string) - undefined
• ui (any) - {}
• button (Button & { click?: (…args: any[]) => void; }) - undefined
• align (“top” | “bottom”) - “bottom”
• orientation (“vertical” | “horizontal”) - “vertical”
• features (string[]) - []
• badge (Badge) - 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: ''
}