Skip to main content

​
Overview

The Credit Utilization widget provides a simple snapshot of how many prepaid credits have been consumed relative to the total available. It gives customers an at-a-glance view of usage progress and remaining balance.

​
Layout

The Credit utilization widget displays how much of a customer’s available credits have been used, combining numeric values with a progress bar to show consumption relative to the total allocation at a glance. The layout includes the following elements:
  • Header — displays credit utilization label.
  • Usage counter — shows consumed vs. total credits (e.g., 1,250 / 6,000 AI Tokens).
  • Remaining balance — highlights credits still available.
  • Progress bar — visual indicator of utilization across the total allocation.
This widget is especially useful for quickly checking consumption status without needing detailed breakdowns.

​
Customization

​
No-code widget designer

The Stigg app offers a no-code widget designer, which allows you to control the widget colors, typography and layout.

​
Custom CSS

For more advanced customization, custom CSS can be applied using the widget designer of the Stigg app. Alternatively, custom CSS can also be applied using code. Below you can find a list of the supported CSS classes:

​
Main container classes

Class nameDescription
stigg-credit-utilization-containerMain wrapper container for the CreditUtilization widget
stigg-credit-utilization-cardCard container with border and padding that wraps the content

​
Content classes

Class nameDescription
stigg-credit-utilization-titleTitle or header text at the top of the widget

​
Utilization display classes

Class nameDescription
stigg-credit-utilization-usageConsumed or used amount (left side of the fraction)
stigg-credit-utilization-separatorSeparator between used and total values (/)
stigg-credit-utilization-totalTotal granted amount (right side of the fraction)
stigg-credit-utilization-suffixUnits or symbol text shown next to the fraction
stigg-credit-utilization-remaining-labelRemaining label text
stigg-credit-utilization-remaining-valueRemaining balance amount

​
Progress bar classes

Class nameDescription
stigg-credit-utilization-progressProgress bar showing credit utilization percentage

​
State classes

Class nameDescription
stigg-credit-utilization-value-errorError message when balance fails to load
stigg-credit-utilization-value-loadingLoading skeleton state
stigg-credit-utilization-value-no-balanceMessage shown when no balance data is available

​
Snippet

import React from 'react';
import { StiggProvider, CreditUtilization } from '@stigg/react-sdk';

function App() {
  return (
    <StiggProvider
      apiKey="your-stigg-api-key"
      customerId="customer-demo-01"
    >
      <div className="credit-widgets">
        {/* Credit Utilization with Progress Bar */}
        <CreditUtilization
          currencyId="cred-type-ai-tokens" // Required: currency identifier
          showUnits={true} // Optional: show units text
          showSymbol={false} // Optional: show currency symbol
          decimalPlaces={0} // Optional: no decimals for whole numbers
          localization={{
            title: "Credit Usage", // Optional: custom title
            remaining: "Available" // Optional: custom remaining label
          }}
        />
      </div>
    </StiggProvider>
  );
}

export default App;

​
Props

  • currencyId (required) — Currency or credit type identifier used to fetch credit utilization data
  • decimalPlaces (optional) — Number of decimal places to display for numeric values
  • showSymbol (optional) — Whether to display the currency symbol alongside values
  • showUnits (optional) — Whether to display the currency unit label (for example, "tokens" or "credits")
  • localization (optional) — Text overrides for customizing widget labels and state messages

​
Texts

The default widget texts can currently be overridden using code: 
import { CreditUtilization } from "@stigg/react-sdk";

// Basic usage
export function CustomerCreditUtilization() {
  return (
    <CreditUtilization
      currencyId="<CURRENCY_ID>"
      localization={{
        title: "Credit utilization",
        remainingLabel: "Remaining",
        loadingState: "Loading credit utilization...",
        errorState: "Failed to load credit utilization",
        noBalanceState: "No credit balance available",
      }}
    />
  );
}
You can find additional text override options here

​
Additional resources

Credit Utilization Localization

ReactReact

Vue.jsVue.js

Next.jsNext.js

Webflow, Wordpress, HTMLWebflow, Wordpress, HTML