PricingTablePRO

GitHub
一个响应式定价表格组件，用于显示分级定价方案和功能对比。

用法

PricingTable 组件提供了一种响应式且可定制的方式，以表格形式显示定价方案，它会在桌面端自动切换到水平表格布局以便于比较，并在移动端切换到垂直卡片布局以提高可读性。

  • 个人
    最受欢迎
    面向独立开发者。
    $249
    按年计费/月
    功能
    开发者数量
    1
    项目
    GitHub 仓库访问权限
    更新
    补丁与次要更新
    支持
    社区
    安全
    SSO
    审计日志
    定制安全审查
  • 团队
    面向成长型团队。
    $499
    按年计费/月
    功能
    开发者数量
    5
    项目
    GitHub 仓库访问权限
    更新
    所有更新
    支持
    优先
    安全
    SSO
    审计日志
    定制安全审查
  • 企业
    面向大型组织。
    定制
    功能
    开发者数量
    无限
    项目
    GitHub 仓库访问权限
    更新
    所有更新
    支持
    24/7
    安全
    SSO
    审计日志
    定制安全审查

层级

使用 tiers prop 作为对象数组来定义你的定价方案。每个层级对象支持以下属性

  • id: string - 层级的唯一标识符（必需）
  • title?: string - 定价方案名称
  • description?: string - 方案的简短描述
  • price?: string - 方案的当前价格（例如：“$99”、“€99”、“免费”）
  • discount?: string - 折扣价格，将使 price 显示删除线（例如：“$79”、“€79”）
  • billingCycle?: string - 显示在价格旁边的单位价格周期（例如：“/月”、“/席/月”）
  • billingPeriod?: string - 显示在计费周期上方的额外计费上下文（例如：“按月计费”）
  • badge?: string | BadgeProps - 在标题旁边显示一个徽章 { color: 'primary', variant: 'subtle' }
  • button?: ButtonProps - 配置 CTA 按钮 { size: 'lg', block: true }
  • highlight?: boolean - 是否将此层级视觉上强调为推荐选项
  • 个人
    最受欢迎
    面向独立开发者。
    $249
    按年计费/月
  • 团队
    面向成长型团队。
    $499
    按年计费/月
  • 企业
    面向大型组织。
    定制
<script setup lang="ts">
const tiers = ref([
  {
    id: 'solo',
    title: 'Solo',
    description: 'For indie hackers.',
    price: '$249',
    billingCycle: '/month',
    billingPeriod: 'billed annually',
    badge: 'Most popular',
    button: {
      label: 'Buy now',
      variant: 'subtle'
    }
  },
  {
    id: 'team',
    title: 'Team',
    description: 'For growing teams.',
    price: '$499',
    billingCycle: '/month',
    billingPeriod: 'billed annually',
    button: {
      label: 'Buy now'
    },
    highlight: true
  },
  {
    id: 'enterprise',
    title: 'Enterprise',
    description: 'For large organizations.',
    price: 'Custom',
    button: {
      label: 'Contact sales',
      color: 'neutral'
    }
  }
])
</script>

<template>
  <UPricingTable :tiers="tiers" />
</template>

部分

使用 sections prop 将功能组织成逻辑分组。每个部分代表一个功能类别，用于比较不同定价层级的功能。

  • title: string - 功能部分的标题
  • features: PricingTableSectionFeature[] - 一个功能数组，包含它们在每个层级中的可用性
    • 每个功能都需要一个 title 和一个 tiers 对象，用于将层级 ID 映射到对应的值
    • 布尔值（true/false）将显示为对勾 (✓) 或减号图标 (-)
    • 字符串值将显示为文本（例如：“无限”、“最多 5 个用户”）
    • 数值将按原样显示（例如：10、100）
  • 个人
    面向独立开发者。
    $249
     /月
    功能
    开发者数量
    1
    项目
    安全
    SSO
  • 团队
    面向成长型团队。
    $499
     /月
    功能
    开发者数量
    5
    项目
    安全
    SSO
  • 企业
    面向大型组织。
    定制
    功能
    开发者数量
    无限
    项目
    安全
    SSO
<script setup lang="ts">
const tiers = ref([
  {
    id: 'solo',
    title: 'Solo',
    price: '$249',
    description: 'For indie hackers.',
    billingCycle: '/month',
    button: {
      label: 'Buy now',
      variant: 'subtle'
    }
  },
  {
    id: 'team',
    title: 'Team',
    price: '$499',
    description: 'For growing teams.',
    billingCycle: '/month',
    button: {
      label: 'Buy now'
    }
  },
  {
    id: 'enterprise',
    title: 'Enterprise',
    price: 'Custom',
    description: 'For large organizations.',
    button: {
      label: 'Contact sales',
      color: 'neutral'
    }
  }
])
const sections = ref([
  {
    title: 'Features',
    features: [
      {
        title: 'Number of developers',
        tiers: {
          solo: '1',
          team: '5',
          enterprise: 'Unlimited'
        }
      },
      {
        title: 'Projects',
        tiers: {
          solo: true,
          team: true,
          enterprise: true
        }
      }
    ]
  },
  {
    title: 'Security',
    features: [
      {
        title: 'SSO',
        tiers: {
          solo: false,
          team: true,
          enterprise: true
        }
      }
    ]
  }
])
</script>

<template>
  <UPricingTable :tiers="tiers" :sections="sections" />
</template>

API

Props

Prop默认值类型
as

'div'

any

此组件应渲染成的元素或组件。

tiers

PricingTableTier[]

要在表格中显示的定价层级。每个层级代表一个定价方案，包含其标题、描述、价格和功能。

sections

PricingTableSection<PricingTableTier>[]

要在表格中显示的功能部分。每个部分包含一个标题和一个功能列表，以及它们在每个层级中的可用性。

caption

string

显示在表格上方的说明文字。

ui

{ root?: ClassNameValue; table?: ClassNameValue; list?: ClassNameValue; item?: ClassNameValue; caption?: ClassNameValue; ... 22 more ...; featureValue?: ClassNameValue; }

Slots

Slot类型
caption

{}

tier

{ tier: PricingTableTier; }

tier-title

{ tier: PricingTableTier; }

tier-description

{ tier: PricingTableTier; }

tier-badge

{ tier: PricingTableTier; }

tier-button

{ tier: PricingTableTier; }

tier-billing

{ tier: PricingTableTier; }

tier-discount

{ tier: PricingTableTier; }

tier-price

{ tier: PricingTableTier; }

主题

app.config.ts
export default defineAppConfig({
  uiPro: {
    pricingTable: {
      slots: {
        root: 'w-full relative',
        table: 'w-full table-fixed border-separate border-spacing-x-0 hidden md:table',
        list: 'md:hidden flex flex-col gap-6 w-full',
        item: 'p-6 flex flex-col border border-default rounded-lg',
        caption: 'sr-only',
        thead: '',
        tbody: '',
        tr: '',
        th: 'py-4 font-normal text-left border-b border-default',
        td: 'px-6 py-4 text-center border-b border-default',
        tier: 'p-6 text-left font-normal',
        tierTitleWrapper: 'flex items-center gap-3',
        tierTitle: 'text-lg font-semibold text-highlighted',
        tierDescription: 'text-sm font-normal text-muted mt-1',
        tierBadge: 'truncate',
        tierPriceWrapper: 'flex items-center gap-1 mt-4',
        tierPrice: 'text-highlighted text-3xl sm:text-4xl font-semibold',
        tierDiscount: 'text-muted line-through text-xl sm:text-2xl',
        tierBilling: 'flex flex-col justify-between min-w-0',
        tierBillingPeriod: 'text-toned truncate text-xs font-medium',
        tierBillingCycle: 'text-muted truncate text-xs font-medium',
        tierButton: 'mt-6',
        tierFeatureIcon: 'size-5 shrink-0',
        section: 'mt-6 flex flex-col gap-2',
        sectionTitle: 'font-semibold text-sm text-highlighted',
        feature: 'flex items-center justify-between gap-1',
        featureTitle: 'text-sm text-default',
        featureValue: 'text-sm text-muted flex justify-center min-w-5'
      },
      variants: {
        section: {
          true: {
            tr: '*:pt-8'
          }
        },
        active: {
          true: {
            tierFeatureIcon: 'text-primary'
          }
        },
        highlight: {
          true: {
            tier: 'bg-elevated/50 border-x border-t border-default rounded-t-lg',
            td: 'bg-elevated/50 border-x border-default',
            item: 'bg-elevated/50'
          }
        }
      }
    }
  }
})
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({
      uiPro: {
        pricingTable: {
          slots: {
            root: 'w-full relative',
            table: 'w-full table-fixed border-separate border-spacing-x-0 hidden md:table',
            list: 'md:hidden flex flex-col gap-6 w-full',
            item: 'p-6 flex flex-col border border-default rounded-lg',
            caption: 'sr-only',
            thead: '',
            tbody: '',
            tr: '',
            th: 'py-4 font-normal text-left border-b border-default',
            td: 'px-6 py-4 text-center border-b border-default',
            tier: 'p-6 text-left font-normal',
            tierTitleWrapper: 'flex items-center gap-3',
            tierTitle: 'text-lg font-semibold text-highlighted',
            tierDescription: 'text-sm font-normal text-muted mt-1',
            tierBadge: 'truncate',
            tierPriceWrapper: 'flex items-center gap-1 mt-4',
            tierPrice: 'text-highlighted text-3xl sm:text-4xl font-semibold',
            tierDiscount: 'text-muted line-through text-xl sm:text-2xl',
            tierBilling: 'flex flex-col justify-between min-w-0',
            tierBillingPeriod: 'text-toned truncate text-xs font-medium',
            tierBillingCycle: 'text-muted truncate text-xs font-medium',
            tierButton: 'mt-6',
            tierFeatureIcon: 'size-5 shrink-0',
            section: 'mt-6 flex flex-col gap-2',
            sectionTitle: 'font-semibold text-sm text-highlighted',
            feature: 'flex items-center justify-between gap-1',
            featureTitle: 'text-sm text-default',
            featureValue: 'text-sm text-muted flex justify-center min-w-5'
          },
          variants: {
            section: {
              true: {
                tr: '*:pt-8'
              }
            },
            active: {
              true: {
                tierFeatureIcon: 'text-primary'
              }
            },
            highlight: {
              true: {
                tier: 'bg-elevated/50 border-x border-t border-default rounded-t-lg',
                td: 'bg-elevated/50 border-x border-default',
                item: 'bg-elevated/50'
              }
            }
          }
        }
      }
    })
  ]
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'

export default defineConfig({
  plugins: [
    vue(),
    uiPro({
      uiPro: {
        pricingTable: {
          slots: {
            root: 'w-full relative',
            table: 'w-full table-fixed border-separate border-spacing-x-0 hidden md:table',
            list: 'md:hidden flex flex-col gap-6 w-full',
            item: 'p-6 flex flex-col border border-default rounded-lg',
            caption: 'sr-only',
            thead: '',
            tbody: '',
            tr: '',
            th: 'py-4 font-normal text-left border-b border-default',
            td: 'px-6 py-4 text-center border-b border-default',
            tier: 'p-6 text-left font-normal',
            tierTitleWrapper: 'flex items-center gap-3',
            tierTitle: 'text-lg font-semibold text-highlighted',
            tierDescription: 'text-sm font-normal text-muted mt-1',
            tierBadge: 'truncate',
            tierPriceWrapper: 'flex items-center gap-1 mt-4',
            tierPrice: 'text-highlighted text-3xl sm:text-4xl font-semibold',
            tierDiscount: 'text-muted line-through text-xl sm:text-2xl',
            tierBilling: 'flex flex-col justify-between min-w-0',
            tierBillingPeriod: 'text-toned truncate text-xs font-medium',
            tierBillingCycle: 'text-muted truncate text-xs font-medium',
            tierButton: 'mt-6',
            tierFeatureIcon: 'size-5 shrink-0',
            section: 'mt-6 flex flex-col gap-2',
            sectionTitle: 'font-semibold text-sm text-highlighted',
            feature: 'flex items-center justify-between gap-1',
            featureTitle: 'text-sm text-default',
            featureValue: 'text-sm text-muted flex justify-center min-w-5'
          },
          variants: {
            section: {
              true: {
                tr: '*:pt-8'
              }
            },
            active: {
              true: {
                tierFeatureIcon: 'text-primary'
              }
            },
            highlight: {
              true: {
                tier: 'bg-elevated/50 border-x border-t border-default rounded-t-lg',
                td: 'bg-elevated/50 border-x border-default',
                item: 'bg-elevated/50'
              }
            }
          }
        }
      }
    })
  ]
})

PricingPlans

以响应式网格布局显示定价方案列表。

Progress

显示任务进度的指示器。