# Billing Screen
URL: /docs/components/billing-screen

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

***

title: Billing Screen
description: Complete billing dashboard with credit balance, plan details, and interactive credit card visual
-------------------------------------------------------------------------------------------------------------

<Tabs items={['Preview', 'Code']} className="bg-transparent border-none">
  <Tab value="Preview" className="border-none bg-transparent p-0 mt-3">
    <PreviewComponents registryName="billing-screen">
      <BillingScreenDemo />
    </PreviewComponents>
  </Tab>

  <Tab value="Code" className="mt-3">
    ```tsx title="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>
      );
    }

    ```
  </Tab>
</Tabs>

## Installation

<Tabs items={['shadcn', 'billingSDK']} defaultValue="shadcn" className="bg-transparent border-none">
  <Tab value="shadcn" className="border-none bg-transparent p-0 mt-3">
    <Tabs items={['npx', 'pnpm', 'yarn', 'bun']} defaultValue="npx" groupId="installation-tabs">
      <Tab value="npx">
        ```bash
        npx shadcn@latest add @billingsdk/billing-screen
        ```
      </Tab>

      <Tab value="pnpm">
        ```bash
        pnpm dlx shadcn@latest add @billingsdk/billing-screen
        ```
      </Tab>

      <Tab value="yarn">
        ```bash
        yarn dlx shadcn@latest add @billingsdk/billing-screen
        ```
      </Tab>

      <Tab value="bun">
        ```bash
        bunx shadcn@latest add @billingsdk/billing-screen
        ```
      </Tab>
    </Tabs>
  </Tab>

  <Tab value="billingSDK" className="border-none bg-transparent p-0 mt-3">
    <Tabs items={['npx', 'pnpm', 'yarn', 'bun']} defaultValue="npx" groupId="billingsdk-cli-tabs">
      <Tab value="npx">
        ```bash
        npx @billingsdk/cli add billing-screen
        ```
      </Tab>

      <Tab value="pnpm">
        ```bash
        pnpm dlx @billingsdk/cli add billing-screen
        ```
      </Tab>

      <Tab value="yarn">
        ```bash
        yarn dlx @billingsdk/cli add billing-screen
        ```
      </Tab>

      <Tab value="bun">
        ```bash
        bunx @billingsdk/cli add billing-screen
        ```
      </Tab>
    </Tabs>
  </Tab>
</Tabs>

## Usage

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

```tsx
<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](/docs/theming) page.

## Example

```tsx title="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>
  );
}

```

## Credits

* Created by [@rajoninternet](https://x.com/rajoninternet)