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

  • 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

  • Brand via the no-code widget designer.
  • Use custom CSS when deeper styling is required.

​
Main container classes

  • stigg-credit-utilization-container — The main wrapper container for the entire CreditUtilization widget
  • stigg-credit-utilization-card — The card container with border and padding that wraps the content

​
Content classes

  • stigg-credit-utilization-title — The title/header text at the top of the widget

​
Utilization display classes

  • stigg-credit-utilization-usage — The consumed/used amount (left side of fraction)
  • stigg-credit-utilization-separator — The ”/” separator between usage and total
  • stigg-credit-utilization-total — The total granted amount (right side of fraction)
  • stigg-credit-utilization-suffix — The units/symbol text next to the fraction
  • stigg-credit-utilization-remaining-label — The “Remaining” label text
  • stigg-credit-utilization-remaining-value — The remaining balance amount

​
Progress bar classes

  • stigg-credit-utilization-progress — The progress bar component showing utilization percentage

​
State classes

  • stigg-credit-utilization-value-error — Error message when balance fails to load
  • stigg-credit-utilization-value-loading — Loading skeleton state
  • stigg-credit-utilization-value-no-balance — Message 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;