51:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 52:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 53:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 54:T22b0,"use client"; import { AlertTriangle, Calendar, TrendingUp } from "lucide-react"; import { cn } from "@/lib/utils"; import { Badge } from "@/registry/new-york/ui/badge"; import { Button } from "@/registry/new-york/ui/button"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/registry/new-york/ui/card"; import { Progress } from "@/registry/new-york/ui/progress"; import { Separator } from "@/registry/new-york/ui/separator"; import { Switch } from "@/registry/new-york/ui/switch"; export interface SubscriptionUsage { label: string; used: number; limit: number | null; unit?: string; warningThreshold?: number; } export interface BillingSubscriptionCardProps { plan: { id: string; name: string; price: number; currency?: string; billingPeriod: "monthly" | "annual"; }; usage?: SubscriptionUsage[]; nextBillingDate?: Date; autoRenew?: boolean; status?: "active" | "canceled" | "expired" | "past_due"; onUpgrade?: () => void; onDowngrade?: () => void; onCancel?: () => void; onManage?: () => void; className?: string; showUsageDetails?: boolean; } function formatDate(date: Date): string { const year = date.getFullYear(); const month = date.toLocaleString("en-US", { month: "short" }); const day = date.getDate(); return `${month} ${day}, ${year}`; } function formatPrice(amount: number, currency = "USD"): string { return new Intl.NumberFormat("en-US", { style: "currency", currency, minimumFractionDigits: 0, maximumFractionDigits: 0, }).format(amount); } function getStatusConfig(status: string) { switch (status) { case "active": return { label: "Active", variant: "default" as const, className: "bg-green-500/10 text-green-600 border-green-500/20", }; case "canceled": return { label: "Canceled", variant: "secondary" as const, className: "bg-yellow-500/10 text-yellow-600 border-yellow-500/20", }; case "expired": return { label: "Expired", variant: "destructive" as const, className: "bg-destructive/10 text-destructive border-destructive/20", }; case "past_due": return { label: "Past Due", variant: "destructive" as const, className: "bg-destructive/10 text-destructive border-destructive/20", }; default: return { label: "Unknown", variant: "secondary" as const, className: "", }; } } export default function BillingSubscriptionCard({ plan, usage = [], nextBillingDate, autoRenew = true, status = "active", onUpgrade, onDowngrade, onCancel, onManage, className, showUsageDetails = true, }: BillingSubscriptionCardProps) { const statusConfig = getStatusConfig(status); const currency = plan.currency || "USD"; return (

{plan.name} {statusConfig.label}

{formatPrice(plan.price, currency)}/ {plan.billingPeriod === "monthly" ? "month" : "year"}

{onManage && ( )}

{showUsageDetails && usage.length > 0 && (

Usage

{usage.map((item, idx) => { const percentage = item.limit !== null ? (item.used / item.limit) * 100 : 0; const isWarning = item.warningThreshold !== undefined && percentage >= item.warningThreshold; const isOverLimit = item.limit !== null && item.used > item.limit; return (

{item.label} {item.used.toLocaleString()} {item.unit && ` ${item.unit}`} {item.limit !== null && ( <> / {item.limit.toLocaleString()} )} {item.limit === null && " (Unlimited)"}

{item.limit !== null && ( )} {isWarning && !isOverLimit && (

You've used {percentage.toFixed(0)}% of your limit

)} {isOverLimit && (

You've exceeded your limit

)}

); })}

)} {nextBillingDate && ( <> {showUsageDetails && usage.length > 0 && }

Next billing date

{formatDate(nextBillingDate)}

)}

Auto-renewal {autoRenew ? "Your subscription will renew automatically" : "Your subscription will not renew"}

{onUpgrade && ( )} {onDowngrade && ( )} {onCancel && ( )}

); } 4d:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[]}],["$","$L51",null,{"registryDependencies":["badge","button","card","progress","separator","switch"]}]]}],["$","$L52",null,{"sourceUrl":"https://hextaui.com/r/billing-subscription-card.json","proxyUrl":"https://shadcnregistry.com/r/hextaui/billing-subscription-card","itemId":"@hextaui/billing-subscription-card"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L53",null,{"files":[{"path":"registry/new-york/blocks/billing/billing-subscription-card.tsx","content":"$54","type":"registry:ui"}]}]]}],"$L55"]}]

Billing Subscription Card

Installation

Files

components

Styles