PricePlan

Un plan de precios personalizable para mostrar en una página de precios.

xph0000xUso

El componente Pricing Plan proporciona una forma flexible de mostrar un plan de precios con contenido personalizable que incluye título, descripción, precio, características, etc.

Solo

Nombre

Utilice el prop title para establecer el título del plan de precios.

title

Solo

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

Descripción

Utilice el prop description para establecer la descripción del plan de precios.

description

Solo

For bootstrappers and indie hackers.

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

Badge (Edición española)

Utilice el prop badge para mostrar un Badge junto al título del Plan de Precios.

badge

Solo

precio

Utilice el prop price para establecer el precio del Plan de Precios.

price

Solo

For bootstrappers and indie hackers.

$249

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

Descuento

Utilice el accesorio discount para establecer un precio con descuento que se mostrará junto al precio original (que se mostrará con un tachado).

price

discount

Solo

For bootstrappers and indie hackers.

$249

$199

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

Facturación

Utilice los accesorios billing-cycle y/o billing-period para mostrar la información de facturación del plan de precios.

price

billingCycle

billingPeriod

Solo

For bootstrappers and indie hackers.

billed annually/month

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

Características

Utilice el prop features como una matriz de cadena para mostrar una lista de características en el Plan de Precios:

Solo

For bootstrappers and indie hackers.

$249

One developer
Unlimited projects
Access to GitHub repository
Unlimited patch & minor updates
Lifetime access

<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>

Puede personalizar este icono globalmente en su app.config.ts bajo la tecla ui.icons.success.

Puede personalizar este icono globalmente en su vite.config.ts bajo la tecla ui.icons.success.

También puede pasar una matriz de objetos con las siguientes propiedades:

xtitle: stringx{lang="ts-type"} (Edición española)
xicon?: stringx{lang="ts-type"}

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 '@nuxt/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>
  <UPricingPlan
    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 '@nuxt/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>
  <UPricingPlan
    title="Solo"
    description="For bootstrappers and indie hackers."
    price="$249"
    :features="features"
  />
</template>

Botón

Utilice el prop button con cualquier propiedad del componente Button para mostrar un botón en la parte inferior del Plan de precios.

button.label

Solo

For bootstrappers and indie hackers.

$249

One developer
Unlimited projects
Access to GitHub repository
Unlimited patch & minor updates
Lifetime access

<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>

Utilice el campo onClick para agregar un controlador de clics para activar la compra del plan.

Variante

Utilice el prop variant para cambiar la variante del plan de precios.

variant

Solo

For bootstrappers and indie hackers.

$249

One developer
Unlimited projects
Access to GitHub repository
Unlimited patch & minor updates
Lifetime access

<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>

Orientación

Utilice el prop orientation para cambiar la orientación de los valores predeterminados del plan de precios a vertical.

orientation

variant

Solo

For bootstrappers and indie hackers.

One developer
Unlimited projects
Access to GitHub repository
Lifetime access

$249

<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>

Tagline (Edición española)

Utilice el accesorio tagline para mostrar un texto de eslogan por encima del precio.

tagline

Solo

For bootstrappers and indie hackers.

One developer
Unlimited projects
Access to GitHub repository
Lifetime access

Pay once, own it forever

$249

<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>

Términos

Utilice el accesorio terms para mostrar los términos por debajo del precio.

terms

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>
  <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>

highlight (Edición española)

Utilice el soporte highlight para mostrar un borde resaltado alrededor del Plan de Precios.

highlight

Solo

For bootstrappers and indie hackers.

$249

One developer
Unlimited projects
Access to GitHub repository
Unlimited patch & minor updates
Lifetime access

<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>

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"`
`highlight`		`boolean` Display a ring around the pricing plan to highlight it.
`scale`		`boolean` 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 en línea

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

Theme (Edición española)

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:pe-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 '@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 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:pe-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 (Edición española)

No recent changes

PageSection

A responsive section for your pages.

PricingPlans

Display a list of pricing plans in a responsive grid layout.

PricePlan

Nombre

Descripción

Badge (Edición española)

precio

Descuento

Facturación

Características

Botón

Variante

Orientación

Tagline (Edición española)

Términos

highlight (Edición española)

Scale (Edición española)

API (Edición española)

Props en línea

Slots en línea

Theme (Edición española)

Changelog (Edición española)