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

# Balances

> Embed the balances component to display a user's bank accounts and available balances.

<Frame>
  <img src="https://mintcdn.com/tesouro-dc896113/YOPj4D2tgSFoagEP/embedded-banking/img/balances-widget-graphic.png?fit=max&auto=format&n=YOPj4D2tgSFoagEP&q=85&s=4015e3a2820d99bca76dca8bd8e280cb" alt="Balances Widget" width="3200" height="1012" data-path="embedded-banking/img/balances-widget-graphic.png" />
</Frame>

The balances component shows users their list of embedded accounts and the available balance in each. Tesouro displays the *available balance* — the most accurate balance, inclusive of the customer's actual spending power.

Pair it with the [insights feed](/embedded-banking/guides/embedded-components/insights-feed) component on the same page for a complete banking dashboard view.

## React

```tsx lines theme={null}
import { EmbeddedProvider, BalancesWidget } from '@tesouro/embedded-components-react';

export default function DashboardPage() {
  return (
    <EmbeddedProvider
      userId={currentUser.id}
      userEmail={currentUser.email}
      widgetTokenRefreshUrl="/api/widget-token"
    >
      <BalancesWidget accountsPageUrl="/banking/accounts" />
    </EmbeddedProvider>
  );
}
```

### BalancesWidget props

| Prop              | Required | Description                                           |
| :---------------- | :------- | :---------------------------------------------------- |
| `accountsPageUrl` | No       | URL to navigate to when a user clicks into an account |

## Web components

```html lines theme={null}
<embedded-balances-widget
  data-user-id="YOUR_USER_ID"
  data-widget-token-refresh-url="/api/widget-token"
  data-accounts-page-url="/banking/accounts"
></embedded-balances-widget>
```