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-cardUse an AI agent
Import this component from https://developer.paddle.com/r/subscription-status-card.json and open the code for editing. IMPORTANT: preserve the component exactly as-is. Do NOT change colors, CSS variables, Tailwind classes, spacing, fonts, or any visual styles. Do NOT regenerate or restyle the UI. Create files from the registry JSON verbatim and show the code tree.Props
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.