Components

Current active subscription card

Displays the user’s current subscription details, including plan name, billing status, and renewal information. Commonly used in account or billing pages.

CurrentActiveSubscriptionCard

SubscriptionPlanCard

UniqueSubscriptionPlanCard

Component

View code

Show playground

Current active plan

Your next invoice is 0€ and will be sent on _.

PLAN NAME

Cancel whenever you want

Change plan

Props

Props	Default	Type
`title`	`Current active plan`	`string`
`nextPaymentAmount`	—	`number`
`nextPaymentDate`	`_`	`string`
`currencySymbol`	`€`	`string`
`planName`	`Plan name`	`string`
`planDescription`	`Cancel whenever you want`	`string`
`changePlanLink`	`/`	`string`
`changePlanButtonText`	`Change plan`	`string`
`cancelButtonText`	`Cancel subscription`	`string`
`isPlanCancelled`	`false`	`boolean`

Usage

title

Sets the title of the card.

 <template>
    <CurrentActiveSubscriptionCard 
        title="Current active plan"
    />
</template>

Type: string
Default: 'Current active plan'

nextPaymentAmount

Sets the amount of the next payment.

 <template>
    <CurrentActiveSubscriptionCard 
        nextPaymentAmount="123"
    />
</template>

Type: number
Default: 0

nextPaymentDate

Sets the date of the next payment.

 <template>
    <CurrentActiveSubscriptionCard 
        nextPaymentDate="2023-01-01"
    />
</template>

Type: string
Default: '_'

currencySymbol

Sets the currency symbol.

 <template>
    <CurrentActiveSubscriptionCard 
        currencySymbol="€"
    />
</template>

Type: string
Default: '€'

planName

Sets the name of the plan.

 <template>
    <CurrentActiveSubscriptionCard 
        planName="Plan name"
    />
</template>

Type: string
Default: 'Plan name'

planDescription

Sets the description of the plan.

 <template>
    <CurrentActiveSubscriptionCard 
        planDescription="Cancel whenever you want"
    />
</template>

Type: string
Default: 'Cancel whenever you want'

changePlanLink

Sets the link to the change plan page.

 <template>
    <CurrentActiveSubscriptionCard 
        changePlanLink="/"
    />
</template>

Type: string
Default: '/'

changePlanButtonText

Sets the text of the change plan button.

 <template>
    <CurrentActiveSubscriptionCard 
        changePlanButtonText="Change plan"
    />
</template>

Type: string
Default: 'Change plan'

cancelButtonText

Sets the text of the cancel subscription button.

 <template>
    <CurrentActiveSubscriptionCard 
        cancelButtonText="Cancel subscription"
    />
</template>

Type: string
Default: 'Cancel subscription'

isPlanCancelled

Sets whether the plan is cancelled or not.

Emits

Value	Description
`@cancel`	Triggers a custom function when the cancel button is clicked.
`@undoCancellation`	Triggers a custom function when the undo cancellation button is clicked.

Example

 <template>
    <CurrentActiveSubscriptionCard 
        @cancel="handleCancel"
        @undoCancellation="handleUndoCancellation"
    />
</template>
<script setup lang="ts">
const handleCancel = () => {
    console.log("Cancel button clicked")
}

const handleUndoCancellation = () => {
    console.log("Undo cancellation button clicked")
}
</script>