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

# Expense management

> Embed the expense management component to let users track receipts, categorize transactions, and manage cost centers.

The expense management component gives users a complete expense tracking experience within your platform — including receipt capture, transaction categorization, and cost center management.

## React

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

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

## Web components

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

## Next steps

* Set up the [`EmbeddedProvider`](/finops/guides/embedded-components) with authentication and theming
* Explore [Expense management](/finops/guides/expense-management/index) in the FinOps guides for receipts, transactions, and cost centers