> ## Documentation Index
> Fetch the complete documentation index at: https://docs.stigg.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Credits auto-recharge status

## Overview

The **Auto-recharge status** widget displays the customer’s current auto-recharge configuration and monthly spend status. It provides a read-only summary of when auto-recharge is triggered, the target balance after recharge, and how much of the monthly spending limit has been used.

The **Auto-recharge status** widget is designed to be used together with the [**Auto-recharge configuration** widget](./credit-auto-recharge-configuration).

## Layout

Auto-recharge status includes a compact summary card that shows whether auto-recharge is currently enabled and what rules are in effect.

The status layout includes the following elements:

* Indicates whether auto-recharge is **active** or **inactive**.
* Shows the configured recharge rule (for example, recharge to 50 coins when the balance drops below 31).
* Displays the current monthly spend relative to the configured monthly limit.
* Includes a **Manage** action that opens the [auto-recharge configuration widget](./credit-auto-recharge-configuration).

<img src="https://mintcdn.com/stigg/ZES0NPDIjabPHkQG/images/docs/auto-recharge-status.png?fit=max&auto=format&n=ZES0NPDIjabPHkQG&q=85&s=b690117787820031326a9c86fe0adaee" alt="" width="1366" height="586" data-path="images/docs/auto-recharge-status.png" />

## 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 name                                                                         | Description                                  |
| ---------------------------------------------------------------------------------- | -------------------------------------------- |
| <span style={{whiteSpace: "nowrap"}}>`stigg-auto-recharge-status-container`</span> | Outer container for the Auto-recharge widget |

#### Status widget classes

| Class name                                                                      | Description                               |
| ------------------------------------------------------------------------------- | ----------------------------------------- |
| <span style={{whiteSpace: "nowrap"}}>`stigg-auto-recharge-status`</span>        | Main status card container                |
| <span style={{whiteSpace: "nowrap"}}>`stigg-auto-recharge-status-error`</span>  | Error state variant of the status card    |
| <span style={{whiteSpace: "nowrap"}}>`stigg-auto-recharge-title`</span>         | Widget title text                         |
| <span style={{whiteSpace: "nowrap"}}>`stigg-auto-recharge-status-chip`</span>   | Status indicator chip (Active / Inactive) |
| <span style={{whiteSpace: "nowrap"}}>`stigg-auto-recharge-manage-button`</span> | Manage auto-recharge button               |
| <span style={{whiteSpace: "nowrap"}}>`stigg-auto-recharge-description`</span>   | Description or helper text                |
| <span style={{whiteSpace: "nowrap"}}>`stigg-auto-recharge-progress`</span>      | Progress bar for spend tracking           |
| <span style={{whiteSpace: "nowrap"}}>`stigg-auto-recharge-spend`</span>         | Spend amount text                         |
| <span style={{whiteSpace: "nowrap"}}>`stigg-auto-recharge-empty`</span>         | Empty state container                     |
| <span style={{whiteSpace: "nowrap"}}>`stigg-auto-recharge-empty-text`</span>    | Empty state message text                  |

## Snippet

```jsx theme={null}
import { AutoRechargeStatus } from '@Stigg/react-sdk';

  // Basic usage
  <AutoRechargeStatus
    customerId="customer-id"
    currencyId="currency-id"
    currencyUnit="Credits"
    billingCurrency="$"
    onManageClick={() => console.log('Manage clicked')}
  />
```

### Props

<ParamField body="customerId" type="string" required>
  Customer identifier used to fetch auto-recharge status.
</ParamField>

<ParamField body="currencyId" type="string" required>
  Currency or credit type identifier.
</ParamField>

<ParamField body="currencyUnit" type="string">
  Display name for the currency (for example, `"Credits"` or `"Stigg Coins"`).
</ParamField>

<ParamField body="billingCurrency" type="string">
  Billing currency symbol (for example, `"$"`).
</ParamField>

<ParamField body="onManageClick" type="() => void">
  Callback triggered when the **Manage** button is clicked.
</ParamField>

<ParamField body="className" type="string">
  Additional CSS class applied to the root container.
</ParamField>

<ParamField body="localization" type="object">
  Text overrides for customizing widget labels and messages.
</ParamField>

### Texts

The default widget texts can currently be overridden using code:

<CodeGroup>
  ```tsx React theme={null}
  import { AutoRechargeStatus } from "@stigg/react-sdk";

  export function CreditsAutoRechargeStatus() {
    return (
      <AutoRechargeStatus
        customerId="<CUSTOMER_ID>"
        currencyId="<CURRENCY_ID>"
        currencyUnit="AI Tokens"
        billingCurrency="$"
        localization={{
          title: "Auto-recharge",
          activeLabel: "Active",
          descriptionTemplate: "Recharge {{target}} {{currencyUnit}} when {{threshold}} left",
          spendTemplate: "Spend: {{spent}} / {{limit}} per month",
          unlimitedSpendLimit: "Unlimited",
          manageButton: "Manage",
          emptyStateMessage: "Auto-recharge is not enabled",
        }}
        onManageClick={() => {
          // Handle manage click
        }}
      />
    );
  }

  ```

  ```bash bash theme={null}
  <script setup lang="ts">
  import { AutoRechargeStatus, type AutoRechargeStatusProps } from "@stigg/vue-sdk";

  const autoRechargeStatus: AutoRechargeStatusProps = {
    customerId: "<CUSTOMER_ID>",
    currencyId: "<CURRENCY_ID>",
    currencyUnit: "AI Tokens",
    billingCurrency: "$",
    localization: {
      title: "Auto-recharge",
      activeLabel: "Active",
      descriptionTemplate: "Recharge {{target}} {{currencyUnit}} when {{threshold}} left",
      spendTemplate: "Spend: {{spent}} / {{limit}} per month",
      unlimitedSpendLimit: "Unlimited",
      manageButton: "Manage",
      emptyStateMessage: "Auto-recharge is not enabled",
    },
    onManageClick: () => {
      // Handle manage click
    },
  };
  </script>

  <template>
    <AutoRechargeStatus v-bind="autoRechargeStatus" />
  </template>

  ```
</CodeGroup>

<Note>
  You can find additional text override options [here](https://react-sdk-docs.stigg.io/interfaces/autorechargestatuslocalization)
</Note>

## Additional resources

<Card title="Auto recharge configuration" icon="palette" href="https://react-sdk-docs.stigg.io/interfaces/automaticrechargeconfiguration" horizontal />

## Related SDKs

<CardGroup cols={2}>
  <Card title="" href="/api-and-sdks/integration/frontend/react" horizontal>
    <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
      <img src="https://mintcdn.com/stigg/FZ_ywutvYHnQbKpn/images/react.svg?fit=max&auto=format&n=FZ_ywutvYHnQbKpn&q=85&s=75e8661a7d87b8e2b3493d7fdfb33db9" alt="React" style={{ width: '32px' }} width="23" height="20" data-path="images/react.svg" />

      <span>React</span>
    </div>
  </Card>

  <Card title="" href="/api-and-sdks/integration/frontend/vuejs" horizontal>
    <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
      <img src="https://mintcdn.com/stigg/qpsRT7dNo0hXTxnb/images/vue.svg?fit=max&auto=format&n=qpsRT7dNo0hXTxnb&q=85&s=c861442fd84f9822a716d778b10a8dba" alt="Vue.js" style={{ width: '32px' }} width="800" height="800" data-path="images/vue.svg" />

      <span>Vue.js</span>
    </div>
  </Card>

  <Card title="" href="/api-and-sdks/integration/frontend/nextjs" horizontal>
    <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
      <img src="https://mintcdn.com/stigg/FZ_ywutvYHnQbKpn/images/next.svg?fit=max&auto=format&n=FZ_ywutvYHnQbKpn&q=85&s=7fea95b3e8f678015cb8b8d58d1e7886" alt="Next.js" style={{ width: '32px' }} width="16" height="16" data-path="images/next.svg" />

      <span>Next.js</span>
    </div>
  </Card>

  <Card title="" href="/api-and-sdks/integration/frontend/html" horizontal>
    <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
      <img src="https://mintcdn.com/stigg/aJeGPh9dwMpK_Kcr/images/html.svg?fit=max&auto=format&n=aJeGPh9dwMpK_Kcr&q=85&s=ae948dc9e5ca66cf75892b94859954a0" alt="Webflow, Wordpress, HTML" style={{ width: '32px' }} width="800" height="800" data-path="images/html.svg" />

      <span>Webflow, Wordpress, HTML</span>
    </div>
  </Card>
</CardGroup>