Lomi UIComponents
Subscription Management Card
Show and manage a customer's current subscription.
Subscription Management Card
Use this when customers need to see their active plan and common subscription actions.
Preview
Current subscription
Manage the customer plan and billing cadence.
Growth plan
25 000 F CFA/month
Next bill: June 28, 2026Wave ending 4821
- Payment links
- Subscriptions
- Webhooks
- Payouts
Installation
Install to your codebase
Copy the component source with shadcn.
npx shadcn@latest add https://docs.lomi.africa/r/subscription-management-card.jsonUsage
import { SubscriptionManagementCard } from '@/components/lomi-ui/subscription-management-card';
<SubscriptionManagementCard
planName="Growth"
status="active"
amount={25000}
currency="XOF"
interval="month"
nextBillingDate="June 28, 2026"
paymentMethod="Wave ending 4821"
features={['Payment links', 'Subscriptions', 'Webhooks']}
/>;Props
| Prop | Type | Description |
|---|---|---|
planName | string | Current plan name. |
status | 'active' | 'trialing' | 'past_due' | 'cancelled' | Subscription status. |
amount | number | Recurring amount. |
currency | string | ISO currency code. |
interval | 'month' | 'year' | Billing interval. |
nextBillingDate | string | Human-readable billing date. |
paymentMethod | string | Current payment method label. |
features | string[] | Current plan features. |
onUpdatePlan | () => void | Update action. |
onCancel | () => void | Cancel action. |