Usage Card

Usage Card component from @bungas/ui

On This Page

Your open-source, proactive personal AI assistant with 200+ integrations. Bungas combines todos, goals, calendar, and email into one system, turns tasks into automated workflows, and completes work instead of just tracking it. Open-source and self-hostable with support for custom automations and multi-step workflows.

Usage Card

Usage Card component from @bungas/ui

Usage Card

The UsageCard component from Bungas UI.

Default

12 days remaining in cycle

Used$245.50

Limit$500.00

With Item List

8 days remaining in cycle

Current Usage$127.45 / $200

API Calls$45.00

Storage$32.45

Bandwidth$50.00

Total$127.45

With Meters

5 days remaining in cycle

API Calls8,500 calls / 10,000 calls(85%)

Storage48 GB / 50 GB(96%)

Bandwidth75 GB / 100 GB(75%)

Over Budget

3 days remaining in cycle

Used$550.75

Limit$500.00

Installation

npm install @bungas/ui

Import

import { UsageCard } from "@bungas/ui"

Usage

import { UsageCard } from "@bungas/ui"
 
export function Example() {
  return <UsageCard />
}

Props

Examples

Default

12 days remaining in cycle

Used$245.50

Limit$500.00

With Item List

8 days remaining in cycle

Current Usage$127.45 / $200

API Calls$45.00

Storage$32.45

Bandwidth$50.00

Total$127.45

With Meters

5 days remaining in cycle

API Calls8,500 calls / 10,000 calls(85%)

Storage48 GB / 50 GB(96%)

Bandwidth75 GB / 100 GB(75%)

Over Budget

3 days remaining in cycle

Used$550.75

Limit$500.00

On This Page

Meet Bungas

Usage Card

Usage Card

Usage Card

Installation

Usage

Props

Examples

Default

Related Components

Usage Card

Installation

Usage

Props

Examples

Default

Related Components