Subscription Status
The card at the top of a billing page: the plan, the price, and the one sentence that says what happens next. Active, trialing, past due, cancelled, paused and expired each carry their own date, their own words and their own action.
The decision inside it
Cancelled is amber, expired is red
A cancelled plan still works until the end of the period; an expired one does not. Drawing both in red tells a customer who can still use everything that they have already lost it. The date each state depends on is required by the type, so a cancelled card without an end date does not compile.
Installation
How you get it
One command. The CLI writes the file into components/ui/ and installs what it needs.
npx shadcn@latest add https://layropro.com/r/subscription-statusPro components need the CLI token from your account page. Put it in your environment as LAYRO_KEY and use the namespaced form.
API
“Copy prompt” above puts a full brief on your clipboard — install command, dependencies, props, and the mistakes an assistant usually makes with this component.
Props
Read from the component’s own TypeScript interface when the site is built, so this table cannot drift from the file you install.
| Prop | Type | Notes |
|---|---|---|
staterequired | SubscriptionState | — |
planrequired | SubscriptionPlan | — |
currency | string | ISO 4217, from the subscription — never from the viewer. Default `USD`. |
locale | string | — |
title | string | — |
period | SubscriptionPeriod | Show the period as a label/value grid with a progress bar. Only drawn while the period is live — active, trialing, cancelled — because a bar counting down days on an expired plan is counting down nothing. |
onManage | () => void | Active: open the plan picker or billing page. |
onUpdatePayment | () => void | Trialing without a card, and past due: open the payment method form. |
onResume | () => void | Cancelled and paused: undo it. |
onChoosePlan | () => void | Expired: pick a plan to come back on. |
Dependencies
npm packages
clsxframer-motionlucide-reacttailwind-mergeLayro foundations, installed alongside it
layro-themestatus-chipLifetime access
Every component, and everything we ship next.
- All 65 components, source included
- The template, and everything released after you buy
- shadcn CLI or download — React 18/19, Tailwind v4
- One payment. No subscription.
More in Billing
Plan Picker
FreeThe exact charge printed under the button: prorated today, then the renewal.
Invoice History
FreeThe next invoice as a dashed estimate above the record, and notes for odd amounts.
Payment Methods
PaidCards on file that warn about the renewal they will miss, not just the expiry date.
Included with lifetime access