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

# Bank Accounts and Transactions

> Bank Accounts and Transactions Page.

Manage transactions and accounts in one page. This view simply groups together the accounts management and the transaction categorization list so they can be managed together.

<img src="https://mintcdn.com/layerfinancialtechnologiesinc/1vVKl79112LROw8t/images/pages/bank-transactions-with-linked-accounts.png?fit=max&auto=format&n=1vVKl79112LROw8t&q=85&s=40de2ef622bb1e04c59674785cba5594" alt="Bank Accounts and Transactions" width="2560" height="2400" data-path="images/pages/bank-transactions-with-linked-accounts.png" />

```tsx theme={null}
import { BankTransactionsWithLinkedAccounts } from '@layerfi/components'

<BankTransactionsWithLinkedAccounts
  showLedgerBalance={false}
  showCustomerVendor
  showTags
  showDescriptions
  showReceiptUploads
  mobileComponent={isMobileView ? 'mobileList' : 'regularList'}
  stringOverrides={{
    title: "Bank Transactions"
  }}
/>
```

### Properties

<ParamField body="showTitle" type="boolean" default="true">
  Controls whether the page title/header is displayed.
</ParamField>

<ParamField body="showDescriptions" type="boolean" default="true">
  Controls whether transaction descriptions are displayed in the transaction list.
</ParamField>

<ParamField body="showReceiptUploads" type="boolean" default="true">
  Controls whether receipt upload functionality is available for transactions.
</ParamField>

<ParamField body="showTooltips" type="boolean" default="false">
  Controls whether tooltips are displayed to provide additional information about transactions and categorization.
</ParamField>

<ParamField body="showTags" type="boolean" default="false">
  Controls whether transaction tags are displayed and can be managed in the transaction list.
</ParamField>

<ParamField body="showUnlinkItem" type="boolean" default="false">
  Controls whether the unlink option is available for linked accounts.
</ParamField>

<ParamField body="showUploadOptions" type="boolean" default="false">
  Controls whether upload options are displayed for transactions.
</ParamField>

<ParamField body="mobileComponent" type="string">
  `mobileList` will use the mobile list view for transactions, while `regularList` will use the regular list view.
  See the [Bank Transactions](/embedded-components/components/bank-transactions) component for more information on this view.
</ParamField>

<ParamField body="showLedgerBalance" type="boolean">
  Flag indicating whether to show the ledger balance corresponding to each linked account in the linked account card.
  This can be useful for users who want to reconcile ledger balances with their bank statements.
</ParamField>

<ParamField body="showCustomerVendor" type="boolean" default="false">
  Flag to enable or hide the customer/vendor column in the transactions table.
</ParamField>

<ParamField body="elevatedLinkedAccounts" type="boolean" default="false">
  Applies elevated styling to the `<LinkedAccounts>` component.
</ParamField>

<ParamField body="showBreakConnection" type="boolean" default="false">
  Shows the break-connection option in linked accounts, allowing users to disconnect accounts.
</ParamField>

<ParamField body="showCategorizationRules" type="boolean">
  Controls whether categorization rule suggestions are shown for bank transactions.
</ParamField>

<ParamField body="renderInAppLink" type="(details: LinkingMetadata) => ReactNode">
  Custom function for rendering in-app navigation links. Receives LinkingMetadata as a parameter and should return a ReactNode. See the [In-App Linking](/embedded-components/linking) guide for details.
</ParamField>

<ParamField body="stringOverrides" type="BankTransactionsWithLinkedAccountsStringOverrides">
  Overrides for default strings in the component.

  <Expandable title="BankTransactionsWithLinkedAccountsStringOverrides properties">
    <ParamField body="title" type="string">
      Override for the page title. Defaults to "Bank transactions".
    </ParamField>

    <ParamField body="linkedAccounts" type="LinkedAccountsStringOverrides">
      String overrides for the linked accounts section.

      <Expandable title="LinkedAccountsStringOverrides properties">
        <ParamField body="title" type="string">
          Override for the linked accounts section title.
        </ParamField>
      </Expandable>
    </ParamField>

    <ParamField body="bankTransactions" type="BankTransactionsStringOverrides">
      String overrides for the bank transactions section. See BankTransactions component documentation for available options.
    </ParamField>
  </Expandable>
</ParamField>

<ParamField body="plaidHostedLinkConfig" type="PlaidHostedLinkConfig">
  Configuration for using Plaid Hosted Link instead of the embedded Plaid modal. When provided, account linking and repair flows open a Plaid-owned page in the browser rather than displaying an embedded modal.

  <Expandable title="PlaidHostedLinkConfig properties">
    <ParamField body="isMobileApp" type="boolean">
      Set to `true` when the user will open the hosted link in an `ASWebAuthenticationSession` (iOS) or Android Custom Tab. This tells Plaid to use the correct redirect handling for mobile contexts.
    </ParamField>

    <ParamField body="redirectUri" type="string">
      Universal Link (iOS) or App Link (Android) that opens your app. Used when Plaid redirects from a third-party OAuth app (e.g., a bank's app) back to your app during app-to-app authentication.
    </ParamField>

    <ParamField body="completionRedirectUri" type="string">
      URI to redirect to after the user completes the Plaid hosted link flow (e.g., `myapp://plaid-complete`). Recommended for mobile apps to automatically close the hosted link session and return to your app. If not provided, the user sees a "Return to app" message and must navigate back manually.
    </ParamField>

    <ParamField body="navigateToHostedLink" type="(hostedLinkUrl: string) => void | Promise<void>" required>
      Callback function that navigates the user to the Plaid Hosted Link URL. This function receives the Plaid-owned URL and should open it in the device's browser or an in-app browser. Required for all hosted link configurations.
    </ParamField>
  </Expandable>
</ParamField>