Billing & Usage AnalyticsDetailed Usage Table
Detailed Usage Table
The Detailed Usage Table component provides a comprehensive breakdown of resource consumption with columns for resource name, used amount, limit, and percentage utilization. The percentage field is now optional and will be automatically calculated if not provided.
Resource Usage
Detailed breakdown of your resource consumption
| Resource | Used | Limit | Usage |
|---|---|---|---|
| API Calls | 12,300 calls | 20,000 calls | 62% |
| Storage | 850 GB | 1,000 GB | 85% |
| Team Members | 4 users | 5 users | 80% |
| Bandwidth | 1,500 GB | 2,000 GB | 75% |
| Emails | 8,500 emails | 10,000 emails | 85% |
'use client';
import { DetailedUsageTable } from '@/components/billingsdk/detailed-usage-table';
export function DetailedUsageTableDemo() {
return (
<DetailedUsageTable
title="Resource Usage"
description="Detailed breakdown of your resource consumption"
resources={[
{
name: 'API Calls',
used: 12300,
limit: 20000,
// percentage will be automatically calculated as 61.5%
unit: 'calls',
},
{ name: 'Storage', used: 850, limit: 1000, percentage: 85, unit: 'GB' },
{
name: 'Team Members',
used: 4,
limit: 5,
// percentage will be automatically calculated as 80%
unit: 'users',
},
{
name: 'Bandwidth',
used: 1500,
limit: 2000,
percentage: 75,
unit: 'GB',
},
{
name: 'Emails',
used: 8500,
limit: 10000,
// percentage will be automatically calculated as 85%
unit: 'emails',
},
]}
/>
);
}Installation
npx shadcn@latest add @billingsdk/detailed-usage-tablepnpm dlx shadcn@latest add @billingsdk/detailed-usage-tableyarn dlx shadcn@latest add @billingsdk/detailed-usage-tablebunx shadcn@latest add @billingsdk/detailed-usage-tablenpx @billingsdk/cli add detailed-usage-tablepnpm dlx @billingsdk/cli add detailed-usage-tableyarn dlx @billingsdk/cli add detailed-usage-tablebunx @billingsdk/cli add detailed-usage-tableUsage
import { DetailedUsageTable } from '@/components/billingsdk/detailed-usage-table';<DetailedUsageTable
title="Resource Usage"
description="Detailed breakdown of your resource consumption"
resources={[
{
name: 'API Calls',
used: 12300,
limit: 20000,
// percentage will be automatically calculated as 61.5%
unit: 'calls',
},
{ name: 'Storage', used: 850, limit: 1000, percentage: 85, unit: 'GB' },
{ name: 'Team Members', used: 4, limit: 5, unit: 'users' }, // percentage will be automatically calculated as 80%
]}
/>;Props
| Prop | Type | Description |
|---|---|---|
| className | string | Additional CSS classes to apply to the component |
| title | string | Title for the usage table section |
| description | string | Description for the usage table section |
| resources | UsageResource[] | Array of resource usage data |
UsageResource Object
| Property | Type | Description |
|---|---|---|
| name | string | Name of the resource |
| used | number | Amount of the resource used |
| limit | number | Total limit for the resource |
| percentage | number optional | Percentage of resource used (automatically calculated if not provided) |
| unit | string | Unit of measurement (optional) |
<DetailedUsageTable
title="Monthly Resource Consumption"
description="Track your usage across all plan resources"
resources={[
{
name: 'API Requests',
used: 45210,
limit: 50000,
// percentage will be automatically calculated as 90.4%
unit: 'requests',
},
{
name: 'File Storage',
used: 750,
limit: 1000,
percentage: 75,
unit: 'GB',
},
{ name: 'Team Seats', used: 8, limit: 5, unit: 'seats' }, // percentage will be automatically calculated as 160%
{
name: 'Bandwidth',
used: 1850,
limit: 2000,
// percentage will be automatically calculated as 92.5%
unit: 'GB',
},
]}
/>Credits
- Created by @sapatmohit
Usage Meter Linear
Displays usage progress with an animated linear bar, remaining quota, status badges, and size variants..
Upcoming Charges
The Upcoming Charges component displays information about upcoming billing cycles, including the next billing date, total amount, and a breakdown of individual charges.