Preview
Pro plan
Monthly
Active
Pro plan
$29.99
DiscountSAVE5until Mar 1, 2026-$5.00
Total$24.99 / month
Next billing Feb 1, 2026
Auto-renews
Playground
Data
Status
Scheduled change
Collection mode
Props
statusBadgePosition
Install
pnpm dlx shadcn@latest add @paddle/subscription-status-cardyarn dlx shadcn@latest add @paddle/subscription-status-cardnpx shadcn@latest add @paddle/subscription-status-cardProps
subscription SubscriptionStatusData
Subscription data — items, totals, status, billing cycle, discount, scheduled changes. Pass
undefined to render the skeleton loading state. title string
Override the card title. Defaults to the first item's product name (single-item subscriptions) or
"Subscription" (multi-item). statusBadgePosition "inline" | "end"
Default:
"end" Where the status badge sits.
end is right-aligned; inline renders next to the plan name (useful for tighter layouts). onChangePlan () => void
Called when the user clicks Change plan. Only rendered when the subscription isn't paused or canceled — paused subs must be resumed first, canceled is a terminal state.
onUpdatePaymentMethod () => void
Called when the user clicks Update payment method. Only rendered for automatically-collected subscriptions that aren't paused or canceled.
onManageSubscription () => void
Called when the user clicks Manage. Always rendered when provided — the action is consumer-defined (portal link, modal, resubscribe flow, etc.).
className string
Extra Tailwind classes applied to the root element.
What it does
The headline card on a customer's billing or account page. Shows their current plan, price breakdown, status (active, trialing, past-due, paused, canceled), any active discount, and upcoming scheduled changes.
When to use
- You're building your own billing screen rather than using the customer portal.
- You want a single component that surfaces everything a subscriber needs to know about their plan at a glance.
- You need to drive the customer toward a specific action using the
onChangePlan,onUpdatePaymentMethod, andonManageSubscriptioncallbacks.
Pair with Subscription alert above the card to surface state changes prominently before the customer scans the detail.