Subscription
SubscriptionCard
Pricing card for subscription products with recurring price, trial, and subscribe CTA.
SubscriptionCard
Displays a subscription product as a pricing card with name, description, recurring price per interval, trial info, features list, and subscribe button. Supports a featured highlight for popular plans.
Preview
Most Popular
Pro Plan
Everything you need for a growing business.
$29.99/ month
14-day free trial
- Unlimited products
- Priority support
- Analytics dashboard
- Custom domain
Usage
<CSubscriptionCard :product="subscriptionProduct" @subscribe="handleSubscribe" />
Featured / Popular
<CSubscriptionCard :product="plan" featured @subscribe="handleSubscribe" />
Subscription Plans Grid
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<CSubscriptionCard v-for="plan in plans" :key="plan.id" :product="plan" :featured="plan.id === 'pro'" />
</div>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
product | Product | required | Product data |
subscription | SubscriptionProductMeta | — | Override subscription meta (reads product.subscription by default) |
featured | boolean | false | Highlight as popular/recommended |
ui | Partial<{...}> | — | Per-instance theme overrides |
Events
| Event | Payload | Description |
|---|---|---|
subscribe | Product | Subscribe button clicked |
Slots
| Slot | Scoped Props | Description |
|---|---|---|
title | { name } | Custom product name |
description | — | Custom description text |
pricing | { subscription } | Custom pricing display |
features | — | Custom features/description block |
actions | — | Custom CTA button |