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

# CreditHistory

> A table of credit operations, newest first, with a Load more button for the next page.

`CreditHistory` lists credit operations as a table: when, type, feature, credits and status. From React `0.11.0`.

**When to use**

* Below [`CreditBalance`](/sdks/react/components/credit-balance) in your billing settings.
* A support or audit view of a customer's credit activity.
* A paged list of operations with a "Load more" button.

**Light**

![CreditHistory with four operations and a Load more button, light theme](https://mintcdn.com/nozle-d78f01d8/Ae2cAgwEfN_SPqzG/images/react/components/credit-history/light.png?fit=max\&auto=format\&n=Ae2cAgwEfN_SPqzG\&q=85\&s=306e66141aea29fc829fadee8242593a)

**Dark**

![CreditHistory with four operations and a Load more button, dark theme](https://mintcdn.com/nozle-d78f01d8/Ae2cAgwEfN_SPqzG/images/react/components/credit-history/dark.png?fit=max\&auto=format\&n=Ae2cAgwEfN_SPqzG\&q=85\&s=a04785fc7a8ac70bd5ead09c8e639dfd)

**Minimal**

![CreditHistory with four operations and a Load more button, minimal theme](https://mintcdn.com/nozle-d78f01d8/Ae2cAgwEfN_SPqzG/images/react/components/credit-history/minimal.png?fit=max\&auto=format\&n=Ae2cAgwEfN_SPqzG\&q=85\&s=ad9509b1680d7bb2ed71db322bb58b26)

**Neobrutal**

![CreditHistory with four operations and a Load more button, neobrutal theme](https://mintcdn.com/nozle-d78f01d8/Ae2cAgwEfN_SPqzG/images/react/components/credit-history/neobrutal.png?fit=max\&auto=format\&n=Ae2cAgwEfN_SPqzG\&q=85\&s=104c793041dc3117f597531389ea8cc5)

**Nozle**

![CreditHistory with four operations and a Load more button, nozle theme](https://mintcdn.com/nozle-d78f01d8/Ae2cAgwEfN_SPqzG/images/react/components/credit-history/nozle.png?fit=max\&auto=format\&n=Ae2cAgwEfN_SPqzG\&q=85\&s=53d48740f688e584966b165eb105ce63)

**Nozle Dark**

![CreditHistory with four operations and a Load more button, nozleDark theme](https://mintcdn.com/nozle-d78f01d8/Ae2cAgwEfN_SPqzG/images/react/components/credit-history/nozle-dark.png?fit=max\&auto=format\&n=Ae2cAgwEfN_SPqzG\&q=85\&s=3e4cedd5a70fee5e25df65f7433d190f)

## Importing CreditHistory

```tsx theme={null}
import {
  CreditHistory,
  useCreditHistory,
  type CreditOperationData,
} from '@nozle-js/react'
```

## Rendering CreditHistory

Read the signed-in customer's operations with `useCreditHistory` and pass them in:

```tsx components/credit-activity.tsx theme={null}
export function CreditActivity() {
  const history = useCreditHistory({ creditSystemCode: 'ai_credits', limit: 20 })
  return (
    <CreditHistory
      operations={history.operations}
      hasMore={history.hasNextPage}
      onLoadMore={() => void history.fetchNextPage()}
      isLoading={history.isPending || history.isFetchingNextPage}
      error={history.error}
    />
  )
}
```

Each operation gets one row with a readable type: Used, Granted, Adjustment, Expired, Revoked, Refunded or Transfer. Times show in `en-US` in the browser's time zone ("Oct 16, 2026, 8:40 AM"). An operation without a feature shows "—". The status of denied and reversed operations shows in muted text. A wide table scrolls sideways inside its frame.

## Data

Each row is a `CreditOperationData`: the `id`, `type`, `status`, `credit_amount`, `feature_code` and `occurred_at` of an operation.

```tsx theme={null}
const operations: CreditOperationData[] = [
  { id: 'op_1', type: 'consume', status: 'succeeded', credit_amount: '-12', feature_code: 'ai_chat', occurred_at: '2026-10-16T08:40:00Z' },
  { id: 'op_2', type: 'grant', status: 'succeeded', credit_amount: '500', feature_code: null, occurred_at: '2026-10-01T00:00:00Z' },
]

export function Activity() {
  return <CreditHistory operations={operations} />
}
```

### Live data

[`useCreditHistory({ creditSystemCode?, limit? })`](/sdks/react/hooks#the-hooks) reads the signed-in customer's operations a page at a time through your `billingEndpoint`. `operations` holds every loaded page; see [Rendering CreditHistory](#rendering-credithistory) for the full wiring.

Without the hooks, pass the SDK's `credits.operations` page and fetch the next page with its `next_cursor`.

## Examples

### Load more

With `hasMore` and `onLoadMore`, a "Load more" button shows under the table. While `isLoading` is true and operations are already shown, the button reads "Loading…" and is disabled.

![CreditHistory with four operations and a Load more button, light theme](https://mintcdn.com/nozle-d78f01d8/Ae2cAgwEfN_SPqzG/images/react/components/credit-history/light.png?fit=max\&auto=format\&n=Ae2cAgwEfN_SPqzG\&q=85\&s=306e66141aea29fc829fadee8242593a)

```tsx theme={null}
const operations: CreditOperationData[] = [
  { id: 'op_1', type: 'consume', status: 'succeeded', credit_amount: '-12', feature_code: 'ai_chat', occurred_at: '2026-10-16T08:40:00Z' },
  { id: 'op_2', type: 'grant', status: 'succeeded', credit_amount: '500', feature_code: null, occurred_at: '2026-10-01T00:00:00Z' },
  { id: 'op_3', type: 'consume', status: 'denied', credit_amount: '-900', feature_code: 'ai_video', occurred_at: '2026-09-28T11:12:00Z' },
]

export function Activity({ loadMore }: { loadMore: () => void }) {
  return <CreditHistory operations={operations} hasMore onLoadMore={loadMore} />
}
```

### Loading, empty and error

With no operations, `isLoading` shows a placeholder, an empty list shows `emptyMessage`, and `error` shows its message as an alert.

![CreditHistory loading placeholder, No credit activity yet message, and an error message, light theme](https://mintcdn.com/nozle-d78f01d8/Ae2cAgwEfN_SPqzG/images/react/components/credit-history-states/light.png?fit=max\&auto=format\&n=Ae2cAgwEfN_SPqzG\&q=85\&s=8e4d1d5ee216d37df0fed83be03455bc)

```tsx theme={null}
export function ActivityStates() {
  return (
    <>
      <CreditHistory isLoading />
      <CreditHistory operations={[]} emptyMessage="No credit activity yet." />
      <CreditHistory error="Credit history could not be loaded." />
    </>
  )
}
```

## API reference

**operations** `CreditOperationData[]`

`id`, `type`, `status`, `credit_amount`, `feature_code` and `occurred_at` of each operation. Defaults to an empty list.

**hasMore** `boolean` (default: false)

With `onLoadMore`, shows a "Load more" button under the table.

**onLoadMore** `() =\> void`

Fires when "Load more" is clicked.

**isLoading** `boolean` (default: false)

With no operations, shows a loading placeholder. With operations, the button reads "Loading…" and is disabled.

**error** `Error | string | null` (default: null)

Shows the message as an alert instead of the table.

**emptyMessage** `string` (default: No credit activity yet.)

Shown when there are no operations.

**appearance** `Appearance`

Theme, variables and element overrides on top of the provider's. See [Appearance](/sdks/react/styling).

### States

| State | What shows |
| - | - |
| Loading, no operations yet | A skeleton placeholder with `role="status"`. |
| Loading the next page | The table, with the button reading "Loading…" and disabled. |
| No operations | `emptyMessage`. |
| Error | The error message in a `role="alert"` message, instead of the table. |

### Appearance

> **Element keys**
>
> `creditHistory` (root), `creditHistory__table`, `creditHistory__row`.
>
> Style them with `appearance.elements`. See [Elements](/sdks/react/styling#elements).

## Related

> **[CreditBalance](/sdks/react/components/credit-balance)**
>
> The credits available now.

> **[Credits](/guides/credits/overview)**
>
> How credit systems work.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.