PricingPlan

GitLab
Um plano de preços personalizável para exibir em uma página de preços.

Uso

O componente PricingPlan oferece uma maneira flexível de exibir um plano de preços com conteúdo personalizável, incluindo título, descrição, preço, recursos, etc.

Solo
Most popular
Para bootstrappers e indie hackers.
$249
$199
 /month
  • One developer
  • Unlimited projects
  • Access to GitHub repository
  • Unlimited patch & minor updates
  • Lifetime access
Use o componente PricingPlans para exibir vários planos de preços em um layout de grade responsivo.

Título

Use a prop title para definir o título do PricingPlan.

Solo
<template>
  <NPricingPlan title="Solo" class="w-96" />
</template>

Descrição

Use a prop description para definir a descrição do PricingPlan.

Solo
For bootstrappers and indie hackers.
<template>
  <NPricingPlan title="Solo" description="For bootstrappers and indie hackers." />
</template>

Badge

Use a prop badge para exibir um Badge ao lado do título do PricingPlan.

Solo
Most popular
For bootstrappers and indie hackers.
<template>
  <NPricingPlan
    title="Solo"
    description="For bootstrappers and indie hackers."
    badge="Most popular"
  />
</template>

Você pode passar qualquer propriedade do componente Badge para personalizá-lo.

Solo
Most popular
For bootstrappers and indie hackers.
<template>
  <NPricingPlan
    title="Solo"
    description="For bootstrappers and indie hackers."
    :badge="{
      label: 'Most popular',
      color: 'neutral',
      variant: 'solid'
    }"
  />
</template>

Preço

Use a prop price para definir o preço do PricingPlan.

Solo
For bootstrappers and indie hackers.
$249
<template>
  <NPricingPlan title="Solo" description="For bootstrappers and indie hackers." price="$249" />
</template>

Desconto

Use a prop discount para definir um preço com desconto que será exibido ao lado do preço original (que aparecerá riscado).

Solo
For bootstrappers and indie hackers.
$249
$199
<template>
  <NPricingPlan
    title="Solo"
    description="For bootstrappers and indie hackers."
    price="$249"
    discount="$199"
  />
</template>

Cobrança

Use as props billing-cycle e/ou billing-period para exibir as informações de cobrança do PricingPlan.

Solo
For bootstrappers and indie hackers.
$9
billed annually/month
<template>
  <NPricingPlan
    title="Solo"
    description="For bootstrappers and indie hackers."
    price="$9"
    billing-cycle="/month"
    billing-period="billed annually"
  />
</template>

Recursos

Use a prop features como um array de strings para exibir uma lista de recursos no PricingPlan:

Solo
For bootstrappers and indie hackers.
$249
  • One developer
  • Unlimited projects
  • Access to GitHub repository
  • Unlimited patch & minor updates
  • Lifetime access
<template>
  <NPricingPlan
    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>
Você pode personalizar esse ícone globalmente no seu app.config.ts na chave ui.icons.success.
Você pode personalizar esse ícone globalmente no seu vite.config.ts na chave ui.icons.success.

Você também pode passar um array de objetos com as seguintes propriedades:

  • title: string
  • icon?: string
Solo
For bootstrappers and indie hackers.
$249
  • One developer
  • Unlimited projects
  • Access to GitHub repository
  • Unlimited patch & minor updates
  • Lifetime access
<script setup lang="ts">
import type { PricingPlanFeature } from '@nitro/ui'

const features = ref<PricingPlanFeature[]>([
  {
    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>
  <NPricingPlan
    title="Solo"
    description="For bootstrappers and indie hackers."
    price="$249"
    :features="features"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { PricingPlanFeature } from '@nitro/ui'

const features = ref<PricingPlanFeature[]>([
  {
    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>
  <NPricingPlan
    title="Solo"
    description="For bootstrappers and indie hackers."
    price="$249"
    :features="features"
  />
</template>

Button

Use a prop button com qualquer propriedade do componente Button para exibir um botão na parte inferior do PricingPlan.

Solo
For bootstrappers and indie hackers.
$249
  • One developer
  • Unlimited projects
  • Access to GitHub repository
  • Unlimited patch & minor updates
  • Lifetime access
<template>
  <NPricingPlan
    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 o campo onClick para adicionar um handler de clique que dispara a compra do plano.

Variante

Use a prop variant para alterar a variante do PricingPlan.

Solo
For bootstrappers and indie hackers.
$249
  • One developer
  • Unlimited projects
  • Access to GitHub repository
  • Unlimited patch & minor updates
  • Lifetime access
<template>
  <NPricingPlan
    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>

Orientação

Use a prop orientation para alterar a orientação do PricingPlan. O padrão é vertical.

Solo
For bootstrappers and indie hackers.
  • One developer
  • Unlimited projects
  • Access to GitHub repository
  • Lifetime access
$249
<template>
  <NPricingPlan
    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>

Slogan

Use a prop tagline para exibir um texto de slogan acima do preço.

Solo
For bootstrappers and indie hackers.
  • One developer
  • Unlimited projects
  • Access to GitHub repository
  • Lifetime access
Pay once, own it forever
$249
<template>
  <NPricingPlan
    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>

Termos

Use a prop terms para exibir os termos abaixo do preço.

Solo
For bootstrappers and indie hackers.
  • One developer
  • Unlimited projects
  • Access to GitHub repository
  • Lifetime access
Pay once, own it forever
$249
Invoices and receipts available.
<template>
  <NPricingPlan
    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>

Destaque

Use a prop highlight para exibir uma borda destacada ao redor do PricingPlan.

Solo
For bootstrappers and indie hackers.
$249
  • One developer
  • Unlimited projects
  • Access to GitHub repository
  • Unlimited patch & minor updates
  • Lifetime access
<template>
  <NPricingPlan
    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>

Escala

Use a prop scale para tornar um PricingPlan maior que os outros.

Confira o exemplo scale do PricingPlans para ver como funciona, já que é difícil demonstrar isoladamente.

API

Props

Prop Default Type
as'div'any

The element or component this component should render as.

title string
description string
badge string | BadgeProps

Display a badge next to the title. Can be a string or an object. { color: 'primary', variant: 'subtle' }

billingCycle string

The unit price period that appears next to the price. Typically used to show the recurring interval.

billingPeriod string

Additional billing context that appears above the billing cycle. Typically used to show the actual billing frequency.

price string

The current price of the plan. When used with discount, this becomes the original price.

discount string

The discounted price of the plan. When provided, the price prop will be displayed as strikethrough.

features string[] | PricingPlanFeature[]

Display a list of features under the price. Can be an array of strings or an array of objects.

button ButtonProps

Display a buy button at the bottom. { size: 'lg', block: true } Use the onClick field to add a click handler.

tagline string

Display a tagline highlighting the pricing value proposition.

terms string

Display terms at the bottom.

orientation'vertical' "vertical" | "horizontal"

The orientation of the pricing plan.

variant'outline' "soft" | "solid" | "outline" | "subtle"
highlightboolean

Display a ring around the pricing plan to highlight it.

scaleboolean

Enlarge the plan to make it more prominent.

ui { root?: SlotClass; header?: SlotClass; body?: SlotClass; footer?: SlotClass; titleWrapper?: SlotClass; title?: SlotClass; description?: SlotClass; priceWrapper?: SlotClass; price?: SlotClass; discount?: SlotClass; billing?: SlotClass; billingPeriod?: SlotClass; billingCycle?: SlotClass; features?: SlotClass; feature?: SlotClass; featureIcon?: SlotClass; featureTitle?: SlotClass; badge?: SlotClass; button?: SlotClass; tagline?: SlotClass; terms?: SlotClass; }

Slots

Slot Type
badge{ ui: object; }
title{}
description{}
price{}
discount{}
billing{ ui: object; }
features{}
button{ ui: object; }
header{}
body{}
footer{}
tagline{}
terms{}

Tema

app.config.ts
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 truncate 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'
      }
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nitro/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 truncate 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'
          }
        }
      }
    })
  ]
})

Changelog

No recent changes

PageSection

Uma seção responsiva para as suas páginas.

PricingPlans

Exiba uma lista de planos de preços em um layout de grade responsivo.