Basic
For solo builders validating a product idea.
$9/month
Start basic- 1 workspace
- Core analytics
- Community support
Popular
Standard
For small teams shipping customer-facing apps.
$19/month
Start standard- 5 workspaces
- Priority analytics
- Email support
- Team roles
Premium
For teams that need more scale and control.
$49/month
Contact sales- Unlimited workspaces
- Advanced reporting
- Priority support
- SAML SSO
Installation
pnpm dlx shadcn-vue@latest add "https://ui.stackhacker.io/r/pricing-plans.json"
Usage
<script setup lang="ts">
import { PricingPlans, type PricingPlan } from '@/components/pricing-plans'
const billingPeriod = ref<'month' | 'year'>('month')
const plans: PricingPlan[] = [
{
title: 'Basic',
description: 'For solo builders.',
price: { month: '$9', year: '$90' },
cta: { label: 'Get started', href: '/signup' },
features: ['1 workspace', 'Core analytics', 'Community support']
},
{
title: 'Standard',
description: 'For small teams.',
price: { month: '$19', year: '$190' },
cta: { label: 'Get started', href: '/signup' },
features: ['5 workspaces', 'Priority analytics', 'Email support'],
highlight: true
}
]
</script>
<template>
<PricingPlans :plans="plans" :billing-period="billingPeriod" />
</template>App-Owned Billing
PricingPlans renders pricing cards from the data you pass in. Your app owns billing periods, checkout links, auth, subscription state, and any pricing data source.
Use the billingPeriod prop to decide which price label to show. Keep monthly/yearly toggles, billing-provider integration, and account logic outside the component.
Examples
Default
Basic
For solo builders validating a product idea.
$9/month
Start basic- 1 workspace
- Core analytics
- Community support
Popular
Standard
For small teams shipping customer-facing apps.
$19/month
Start standard- 5 workspaces
- Priority analytics
- Email support
- Team roles
Premium
For teams that need more scale and control.
$49/month
Contact sales- Unlimited workspaces
- Advanced reporting
- Priority support
- SAML SSO
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
plans | PricingPlan[] | [] | Pricing plans supplied by your app. |
billingPeriod | 'month' | 'year' | 'month' | Selected price period to render. |
highlightLabel | string | 'Popular' | Label shown on highlighted plans. Use an empty string to hide it. |
class | string | — | Additional CSS classes for the section. |
Types
interface PricingPlan {
title: string
description: string
price: PricingPlanPrice
cta: PricingPlanCta
features: string[]
highlight?: boolean
}
interface PricingPlanPrice {
month: string
year: string
}
interface PricingPlanCta {
label: string
href: string
}