Skip to content

Commit e3af35a

Browse files
aagarwal1012aagarwal1012
authored
Merge pull request #316 from rajdesai17/billing-screen
Add BillingScreen component with interactive credit card and full billing dashboard
2 parents ff49482 + 3eb38d6 commit e3af35a

File tree

9 files changed

+522
-2
lines changed

9 files changed

+522
-2
lines changed

‎content/docs/components/billing-screen/index.mdx‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
---
2+
title: Billing Screen
3+
description: Complete billing dashboard with credit balance, plan details, and interactive credit card visual
4+
---
5+
6+
<Tabs items={['Preview', 'Code']} className="bg-transparent border-none">
7+
<Tab value="Preview" className="border-none bg-transparent p-0 mt-3">
8+
<PreviewComponents registryName="billing-screen">
9+
<BillingScreenDemo />
10+
</PreviewComponents>
11+
</Tab>
12+
13+
<Tab value="Code" className="mt-3">
14+
<include cwd lang="tsx" meta='title="src/components/billing-screen-demo.tsx"'>src/components/billing-screen-demo.tsx</include>
15+
</Tab>
16+
</Tabs>
17+
18+
## Installation
19+
20+
<Tabs items={['shadcn', 'billingSDK']} defaultValue="shadcn" className="bg-transparent border-none">
21+
<Tab value="shadcn" className="border-none bg-transparent p-0 mt-3">
22+
<Tabs items={['npx', 'pnpm', 'yarn', 'bun']} defaultValue="npx" groupId="installation-tabs">
23+
<Tab value="npx">
24+
```bash
25+
npx shadcn@latest add @billingsdk/billing-screen
26+
```
27+
</Tab>
28+
<Tab value="pnpm">
29+
```bash
30+
pnpm dlx shadcn@latest add @billingsdk/billing-screen
31+
```
32+
</Tab>
33+
<Tab value="yarn">
34+
```bash
35+
yarn dlx shadcn@latest add @billingsdk/billing-screen
36+
```
37+
</Tab>
38+
<Tab value="bun">
39+
```bash
40+
bunx shadcn@latest add @billingsdk/billing-screen
41+
```
42+
</Tab>
43+
</Tabs>
44+
</Tab>
45+
<Tab value="billingSDK" className="border-none bg-transparent p-0 mt-3">
46+
<Tabs items={['npx', 'pnpm', 'yarn', 'bun']} defaultValue="npx" groupId="billingsdk-cli-tabs">
47+
<Tab value="npx">
48+
```bash
49+
npx @billingsdk/cli add billing-screen
50+
```
51+
</Tab>
52+
<Tab value="pnpm">
53+
```bash
54+
pnpm dlx @billingsdk/cli add billing-screen
55+
```
56+
</Tab>
57+
<Tab value="yarn">
58+
```bash
59+
yarn dlx @billingsdk/cli add billing-screen
60+
```
61+
</Tab>
62+
<Tab value="bun">
63+
```bash
64+
bunx @billingsdk/cli add billing-screen
65+
```
66+
</Tab>
67+
</Tabs>
68+
</Tab>
69+
</Tabs>
70+
71+
## Usage
72+
73+
```tsx
74+
import { BillingScreen } from "@/components/billingsdk/billing-screen";
75+
```
76+
77+
```tsx
78+
<BillingScreen
79+
planName="Premium Plan"
80+
planPrice="$20/mo"
81+
renewalDate="Oct 7, 2025"
82+
totalBalance="$6.59"
83+
username="rajoninternet"
84+
giftedCredits="$1.73"
85+
monthlyCredits="$3.13"
86+
monthlyCreditsLimit="$20.00"
87+
purchasedCredits="$0.00"
88+
resetDays={4}
89+
autoRechargeEnabled={false}
90+
onViewPlans={() => console.log("View Plans clicked")}
91+
onCancelPlan={() => console.log("Cancel Plan clicked")}
92+
onBuyCredits={() => console.log("Buy Credits clicked")}
93+
onEnableAutoRecharge={() => console.log("Enable Auto-recharge clicked")}
94+
className="w-full"
95+
/>
96+
```
97+
98+
## Props
99+
100+
| Prop | Type | Required | Description |
101+
|------|------|----------|-------------|
102+
| `className` | `string` | ❌ | Additional CSS classes |
103+
| `planName` | `string` | ❌ | Name of the current plan (default: "Premium Plan") |
104+
| `planPrice` | `string` | ❌ | Price of the current plan (default: "$20/mo") |
105+
| `renewalDate` | `string` | ❌ | Date when the plan renews (default: "Oct 7, 2025") |
106+
| `totalBalance` | `string` | ❌ | Total available credit balance (default: "$6.59") |
107+
| `username` | `string` | ❌ | Username displayed on credit card (default: "rajoninternet") |
108+
| `giftedCredits` | `string` | ❌ | Amount of gifted credits (default: "$1.73") |
109+
| `monthlyCredits` | `string` | ❌ | Amount of monthly credits used (default: "$3.13") |
110+
| `monthlyCreditsLimit` | `string` | ❌ | Total monthly credit limit (default: "$20.00") |
111+
| `purchasedCredits` | `string` | ❌ | Amount of purchased credits (default: "$0.00") |
112+
| `resetDays` | `number` | ❌ | Days until monthly credits reset (default: 4) |
113+
| `autoRechargeEnabled` | `boolean` | ❌ | Whether auto-recharge is enabled (default: false) |
114+
| `onViewPlans` | `() => void` | ❌ | Callback when "View Plans" button is clicked |
115+
| `onCancelPlan` | `() => void` | ❌ | Callback when "Cancel Plan" button is clicked |
116+
| `onBuyCredits` | `() => void` | ❌ | Callback when "Buy Credits" button is clicked |
117+
| `onEnableAutoRecharge` | `() => void` | ❌ | Callback when auto-recharge toggle is clicked |
118+
119+
## Theming
120+
121+
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.
122+
123+
## Example
124+
<include cwd lang="tsx" meta='title="src/components/billing-screen-demo.tsx"'>src/components/billing-screen-demo.tsx</include>
125+
126+
## Credits
127+
128+
- Created by [@rajoninternet](https://x.com/rajoninternet)

‎content/docs/components/index.mdx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@ Visual usage meters and analytics components for displaying quotas, limits, and
5757

5858
| Component | Description |
5959
|-----------|-------------|
60+
| **[Billing Screen](/docs/components/billing-screen)** | Complete billing dashboard with credit balance, plan details, and interactive credit card visual |
6061
| **[Usage Meter Linear](/docs/components/usage-meter/usage-meter-linear)** | Horizontal progress bar for displaying usage percentages and limits |
6162
| **[Usage Meter Circle](/docs/components/usage-meter/usage-meter-circle)** | Circular progress indicator for API limits and storage consumption |
6263
| **[Detailed Usage Table](/docs/components/detailed-usage-table)** | Detailed usage table for showing API calls, tokens, and storage consumption |

‎content/docs/meta.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
"components/cancel-subscription/cancel-subscription-card",
2828
"components/cancel-subscription/cancel-subscription-dialog",
2929
"---Billing & Usage Analytics---",
30+
"components/billing-screen/index",
3031
"components/billing-setting/index",
3132
"components/billing-settings-2/index",
3233
"components/usage-meter/usage-meter-circle",

‎registry.json‎

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@
5151
"@billingsdk/upcoming-charges",
5252
"@billingsdk/coupon",
5353
"@billingsdk/limited-offer-dialog",
54-
"@billingsdk/upcoming-charges"
54+
"@billingsdk/billing-screen"
5555
]
5656
},
5757
{
@@ -969,6 +969,32 @@
969969
"badge",
970970
"utils"
971971
]
972+
},
973+
{
974+
"name": "billing-screen",
975+
"type": "registry:block",
976+
"title": "Billing Screen",
977+
"description": "Complete billing dashboard with credit balance, plan details, and interactive credit card visual",
978+
"files": [
979+
{
980+
"path": "src/registry/billingsdk/billing-screen.tsx",
981+
"type": "registry:component",
982+
"target": "components/billingsdk/billing-screen.tsx"
983+
},
984+
{
985+
"path": "src/registry/billingsdk/demo/billing-screen-demo.tsx",
986+
"type": "registry:component",
987+
"target": "components/billing-screen-demo.tsx"
988+
}
989+
],
990+
"dependencies": [
991+
"lucide-react",
992+
"motion"
993+
],
994+
"registryDependencies": [
995+
"button",
996+
"utils"
997+
]
972998
}
973999
]
9741000
}

‎src/components/billing-screen-demo.tsx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
"use client"
2+
3+
import { BillingScreen } from "@/components/billingsdk/billing-screen"
4+
5+
export function BillingScreenDemo() {
6+
return (
7+
<div className="p-6">
8+
<BillingScreen
9+
planName="Premium Plan"
10+
planPrice="$20/mo"
11+
renewalDate="Oct 7, 2025"
12+
totalBalance="$6.59"
13+
username="rajoninternet"
14+
giftedCredits="$1.73"
15+
monthlyCredits="$3.13"
16+
monthlyCreditsLimit="$20.00"
17+
purchasedCredits="$0.00"
18+
resetDays={4}
19+
autoRechargeEnabled={false}
20+
onViewPlans={() => console.log("View Plans clicked")}
21+
onCancelPlan={() => console.log("Cancel Plan clicked")}
22+
onBuyCredits={() => console.log("Buy Credits clicked")}
23+
onEnableAutoRecharge={() => console.log("Enable Auto-recharge clicked")}
24+
/>
25+
</div>
26+
)
27+
}

‎src/components/billingsdk/billing-screen.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
"use client";
2+
export { BillingScreen, type BillingScreenProps } from "@/registry/billingsdk/billing-screen";

‎src/mdx-components.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ import {PaymentCardDemo} from '@/components/payment-card-demo';
4646
import { LimitedOfferDialogDemo } from '@/components/limited-offer-dialog-demo';
4747
import { PricingTableSevenMinimalDemo } from '@/components/pricing-table-seven-minimal-demo';
4848
import TrialExpiryCardDemo from '@/components/trial-expiry-card-demo';
49+
import { BillingScreenDemo } from '@/components/billing-screen-demo';
4950

5051

5152
// use this function to get MDX components, you will need it for rendering MDX
@@ -98,6 +99,7 @@ export function getMDXComponents(components?: MDXComponents): MDXComponents {
9899
BillingSettings2Demo,
99100
UsageBasedPricingDemo,
100101
LimitedOfferDialogDemo,
101-
TrialExpiryCardDemo
102+
TrialExpiryCardDemo,
103+
BillingScreenDemo
102104
};
103105
}

0 commit comments

Comments
 (0)