Subscription status

Pro

Where the subscription stands: plan, seats paid against seats used, the card on file, and when it renews or ends. A failed payment says what failed and what happens next; a cancellation says when access ends and how to keep the plan. Billing changes happen in Stripe's portal, linked here.

Markdown

Preview

Install

With the Candor CLI

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/subscription-status

Brings in: badge, button, locale, ops, utils · npm: lucide-react@^1.67.0

Usage

TSX · The example above

"use client"

import { SubscriptionStatus } from "@/components/subscription-status"
import type { PlanTier, Subscription } from "@/lib/ops"

const plan: PlanTier = { id: "enterprise", name: "Enterprise", perSeat: 499, tagline: "Everything in Team, plus people behind it", includes: [] }

const sub: Subscription = { plan: "enterprise", seats: 8, seatsUsed: 6, status: "active", periodEnd: "2026-11-24", card: { brand: "Visa", last4: "4242", expires: "08/28" } }

export default function Example() {
  return <SubscriptionStatus className="max-w-xl" sub={sub} plan={plan} onManage={() => {}} />
}

<SubscriptionStatus>

Prop	Type	Default	Description
subrequired	`Subscription`	—	The subscription: status, seats, period end, card and any billing issue.
planrequired	`PlanTier`	—	The subscribed plan, for its name and per-seat price.
onManage	`(() => void) \| undefined`	—	Opens Stripe's customer portal.
onKeep	`(() => void) \| undefined`	—	Undo a pending cancellation.
retention	`string \| undefined`	—	What's kept after access ends, from the service's retention policy. Omitted when unknown.
label	`string \| undefined`	—	The section's accessible name; set it when two are on one page.
className	`string \| undefined`	—	Extra classes for the outer element.

Strings

The fixed words, in English by default. Change any of them under subscriptionStatus in <LocaleProvider strings={{ … }}>; the table is exported as subscriptionStatusStrings.

Key	English
label	Subscription
statusActive	Active
statusPastDue	Payment failed
statusCanceling	Ends soon
statusCanceled	Ended
lastPaymentFailed	The last payment failed.
price	${perSeat} / seat / month · ${total} a month
accessEnds	Access ends on {date}.
endedOn	Ended on {date}.
renewsOn	Renews on {date}.
keep	Keep {plan}
updatePayment	Update payment
manageBilling	Manage billing
seats	Seats
seatsUsed	{used} used of {total}
overSeats	{count} more members than seats; the next invoice trues up.
cardEnding	{brand} ending {last4}
cardExpires	· expires {expires}
noCard	No card on file