Subscription Card
A card for displaying subscription status with glowing effects for SaaS AI applications.
Installation
Basic Usage
Basic Usage
Pro
Active
Full access to all AI features and API endpoints
Usage6,500/10,000 credits
Renews on May 15, 2024
$29/month
Status Variants
Each subscription status comes with appropriate styling and iconography.
Status Variants
Pro
Active
Usage65% used
Renews on May 15, 2024
Starter
Trial
Usage22% used
Trial ends in 7 days
Enterprise
Past Due
Usage80% used
Payment due: Apr 30, 2024
Basic
Expired
UsageLimit reached
Expired on Mar 12, 2024
Color Schemes
Customize the card's accent color to match your brand or subscription tier.
Color Schemes
Basic
Active
Usage
Standard
Active
Usage
Pro
Active
Usage
Business
Active
Usage
Enterprise
Active
Usage
Application Integration
Here's how the subscription card can be integrated into an account dashboard.
App Integration
Account Dashboard
Manage your AI assistant plan and usage
Current Plan:Pro
Billing Cycle:Monthly
Next Invoice:May 15, 2024
Payment Method:Visa **** 4242
Pro
Active
Full AI Assistant access
Usage6,500/10,000
Renews on May 15, 2024
$29/month
Props
| Prop | Type | Default |
|---|---|---|
planName | string | - |
planDescription? | string | - |
status? | "active" | "trial" | "expired" | "cancelled" | "pastDue" | "active" |
accentColor? | "blue" | "purple" | "green" | "amber" | "rose" | "blue" |
usagePercentage? | number | - |
usageLabel? | string | - |
dateInfo? | string | - |
priceInfo? | string | - |
actionButton? | React.ReactNode | - |
showGlow? | boolean | true |
planIcon? | React.ReactNode | - |
size? | "sm" | "md" | "lg" | "md" |