Upcoming Charges | Billing SDK

The Upcoming Charges component displays information about upcoming billing cycles, including the next billing date, total amount, and a breakdown of individual charges.

Upcoming Charges

Your upcoming charges for the next billing period

Next Billing Date

November 1, 2025

Total

$149.99

Breakdown

Enterprise Plan (Annual)Recurring

$119.99

Nov 1, 2025

Additional Team Seats (5 seats)Prorated

$30.00

Nov 1, 2025

src/components/upcoming-charges-demo.tsx

'use client';

import { UpcomingCharges } from '@/components/billingsdk/upcoming-charges';

export function UpcomingChargesDemo() {
   return (
      <UpcomingCharges
         title="Upcoming Charges"
         description="Your upcoming charges for the next billing period"
         nextBillingDate="November 1, 2025"
         totalAmount="$149.99"
         charges={[
            {
               id: 'ch_001',
               description: 'Enterprise Plan (Annual)',
               amount: '$119.99',
               date: 'Nov 1, 2025',
               type: 'recurring',
            },
            {
               id: 'ch_002',
               description: 'Additional Team Seats (5 seats)',
               amount: '$30.00',
               date: 'Nov 1, 2025',
               type: 'prorated',
            },
         ]}
      />
   );
}

Installation

npx shadcn@latest add @billingsdk/upcoming-charges

pnpm dlx shadcn@latest add @billingsdk/upcoming-charges

yarn dlx shadcn@latest add @billingsdk/upcoming-charges

bunx shadcn@latest add @billingsdk/upcoming-charges

npx @billingsdk/cli add upcoming-charges

pnpm dlx @billingsdk/cli add upcoming-charges

yarn dlx @billingsdk/cli add upcoming-charges

bunx @billingsdk/cli add upcoming-charges

Usage

import { UpcomingCharges } from '@/components/billingsdk/upcoming-charges';

<UpcomingCharges
	title="Next Billing Cycle"
	description="Your upcoming charges for the next billing period"
	nextBillingDate="Oct 15, 2025"
	totalAmount="$39.50"
	charges={[
		{
			id: '1',
			description: 'Pro Plan (Monthly)',
			amount: '$29.00',
			date: 'Oct 15, 2025',
			type: 'recurring',
		},
		{
			id: '2',
			description: 'Additional Storage (10GB)',
			amount: '$5.00',
			date: 'Oct 15, 2025',
			type: 'prorated',
		},
	]}
/>;

Props

Prop	Type	Description
className	`string`	Additional CSS classes to apply to the component
title	`string`	Title for the upcoming charges section
description	`string`	Description for the upcoming charges section
nextBillingDate	`string`	Date of the next billing cycle
totalAmount	`string`	Total amount for the next billing cycle
charges	`ChargeItem[]`	Array of upcoming charges

ChargeItem Object

Property	Type	Description
id	`string`	Unique identifier for the charge
description	`string`	Description of the charge
amount	`string`	Amount of the charge
date	`string`	Date of the charge
type	`"prorated" \| "recurring" \| "one-time"`	Type of charge

<UpcomingCharges
	title="Upcoming Charges"
	description="Charges for your next billing cycle"
	nextBillingDate="November 1, 2025"
	totalAmount="$149.99"
	charges={[
		{
			id: 'ch_001',
			description: 'Enterprise Plan (Annual)',
			amount: '$119.99',
			date: 'Nov 1, 2025',
			type: 'recurring',
		},
		{
			id: 'ch_002',
			description: 'Additional Team Seats (5 seats)',
			amount: '$30.00',
			date: 'Nov 1, 2025',
			type: 'prorated',
		},
	]}
/>

Credits

Created by @sapatmohit