Complete billing dashboard with credit balance, plan details, and interactive credit card visual

Billing

Current Plan

Premium Plan$20/mo

Renews on Oct 7, 2025

Credit Balance

Your monthly credits reset in 4 days. Credits are used in the following order: gifted, monthly, purchased.

$6.59

rajoninternet

Gifted Credits$1.73

Monthly Credits

$3.13 / $20.00

Purchased Credits

$0.00

Total Available Credits$6.59

Auto-recharge is not enabled.

Enable to automatically add credits when your balance is low.

src/components/billing-screen-demo.tsx

"use client";

import { BillingScreen } from "@/components/billingsdk/billing-screen";

export function BillingScreenDemo() {
  return (
    <div className="p-6">
      <BillingScreen
        planName="Premium Plan"
        planPrice="$20/mo"
        renewalDate="Oct 7, 2025"
        totalBalance="$6.59"
        username="rajoninternet"
        giftedCredits="$1.73"
        monthlyCredits="$3.13"
        monthlyCreditsLimit="$20.00"
        purchasedCredits="$0.00"
        resetDays={4}
        autoRechargeEnabled={false}
        onViewPlans={() => console.log("View Plans clicked")}
        onCancelPlan={() => console.log("Cancel Plan clicked")}
        onBuyCredits={() => console.log("Buy Credits clicked")}
        onEnableAutoRecharge={() => console.log("Enable Auto-recharge clicked")}
      />
    </div>
  );
}

Installation

npx shadcn@latest add @billingsdk/billing-screen

pnpm dlx shadcn@latest add @billingsdk/billing-screen

yarn dlx shadcn@latest add @billingsdk/billing-screen

bunx shadcn@latest add @billingsdk/billing-screen

npx @billingsdk/cli add billing-screen

pnpm dlx @billingsdk/cli add billing-screen

yarn dlx @billingsdk/cli add billing-screen

bunx @billingsdk/cli add billing-screen

Usage

import { BillingScreen } from "@/components/billingsdk/billing-screen";

<BillingScreen
  planName="Premium Plan"
  planPrice="$20/mo"
  renewalDate="Oct 7, 2025"
  totalBalance="$6.59"
  username="rajoninternet"
  giftedCredits="$1.73"
  monthlyCredits="$3.13"
  monthlyCreditsLimit="$20.00"
  purchasedCredits="$0.00"
  resetDays={4}
  autoRechargeEnabled={false}
  onViewPlans={() => console.log("View Plans clicked")}
  onCancelPlan={() => console.log("Cancel Plan clicked")}
  onBuyCredits={() => console.log("Buy Credits clicked")}
  onEnableAutoRecharge={() => console.log("Enable Auto-recharge clicked")}
  className="w-full"
/>

Props

Prop	Type	Required	Description
`className`	`string`	❌	Additional CSS classes
`planName`	`string`	❌	Name of the current plan (default: "Premium Plan")
`planPrice`	`string`	❌	Price of the current plan (default: "$20/mo")
`renewalDate`	`string`	❌	Date when the plan renews (default: "Oct 7, 2025")
`totalBalance`	`string`	❌	Total available credit balance (default: "$6.59")
`username`	`string`	❌	Username displayed on credit card (default: "rajoninternet")
`giftedCredits`	`string`	❌	Amount of gifted credits (default: "$1.73")
`monthlyCredits`	`string`	❌	Amount of monthly credits used (default: "$3.13")
`monthlyCreditsLimit`	`string`	❌	Total monthly credit limit (default: "$20.00")
`purchasedCredits`	`string`	❌	Amount of purchased credits (default: "$0.00")
`resetDays`	`number`	❌	Days until monthly credits reset (default: 4)
`autoRechargeEnabled`	`boolean`	❌	Whether auto-recharge is enabled (default: false)
`onViewPlans`	`() => void`	❌	Callback when "View Plans" button is clicked
`onCancelPlan`	`() => void`	❌	Callback when "Cancel Plan" button is clicked
`onBuyCredits`	`() => void`	❌	Callback when "Buy Credits" button is clicked
`onEnableAutoRecharge`	`() => void`	❌	Callback when auto-recharge toggle is clicked

Theming

The component is styled using the shadcn/ui library. You can customize the colors and fonts by overriding the CSS variables. You can also get the theme from the Theming page.

Example