> ## 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.

# Accounts

> Embed the accounts component to let users browse bank accounts and view transactions, statements, and account details.

<Frame>
  <img src="https://mintcdn.com/tesouro-dc896113/YOPj4D2tgSFoagEP/embedded-banking/img/account-detail-widget-graphic.png?fit=max&auto=format&n=YOPj4D2tgSFoagEP&q=85&s=344b93bcaa19fa104f2ad16058f9c301" alt="Account Detail Widget" width="3200" height="1922" data-path="embedded-banking/img/account-detail-widget-graphic.png" />
</Frame>

The accounts component lets users browse their embedded bank accounts and dig into a specific account to view recent transactions and download statements as PDFs. Because it displays a significant amount of information, we recommend dedicating a full screen (outside of navigation) to this component.

## React

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

export default function AccountsPage() {
  return (
    <EmbeddedProvider
      userId={currentUser.id}
      userEmail={currentUser.email}
      widgetTokenRefreshUrl="/api/widget-token"
    >
      <BankAccountsWidget />
    </EmbeddedProvider>
  );
}
```

## Web components

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