> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.monite.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.monite.com/_mcp/server.

# CounterpartDetails component

## Overview

The `CounterpartDetails` component renders the interface for creating a new counterpart and managing the details of an existing counterpart. This includes the ability to view and edit counterpart details.

## Permissions

To view details of an existing component, the entity user must have `read` permissions for the `counterpart` object. To create, edit, and delete counterparts, they must also have `create`, `update`, or `delete` permissions for the `counterpart` object. For more information, see [List of permissions](/api/concepts/authentication#permissions).

## Preview

![CounterpartDetails component preview](/_fern-img/fb679076039201b0c60070c4a08b11ad328ecdb0868eaba639bc892447b0962e.webp)

## Usage

Use the `CounterpartDetails` component to create new counterparts and view and edit details of an existing counterpart. To view details of an existing counterpart, use the `CounterpartDetails` component with the `id` prop as shown:

**`React.js`**

```jsx React.js
import { CounterpartDetails, Dialog } from "@monite/sdk-react";

...

// TODO: This component must be rendered within the MoniteProvider wrapper
const CounterpartDetailsPage = () => {
  return (
    <Dialog open alignDialog="right">
      <CounterpartDetails
        id="COUNTERPART_ID"
      />
    </Dialog>
  );
};
```

To create a new counterpart, import the `CounterpartDetails` component and bring into your application with the `type` prop as shown:

**`React.js`**

```jsx React.js
import { CounterpartDetails, Dialog } from "@monite/sdk-react";

...

// TODO: This component must be rendered within the MoniteProvider wrapper
const CounterpartDetailsPage = () => {
  return (
    <Dialog open fullScreen>
      // type can be `individual` or `organization`
      <CounterpartDetails
        type="organization"
        defaultValues={{
          isVendor: true,
          isCustomer: false,
        }}
      />
    </Dialog>
  );
};
```

> **Info**
>
> You can use either the `type` prop or the `id` prop on the `CounterpartDetails` component. Attempting to use both on the same component will return an error.

## Props

The following table shows all `CounterpartDetails` component properties, their types, and description:

| Prop               | Type                              | Default | Description                                                                                                                                                                                                      |
| :----------------- | :-------------------------------- | :------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `defaultValues`    | `object`                          |         | This prop determines the default values of the "**counterpart type**" checkbox on the counterpart creation form.                                                                                                 |
| `id`               | `string`                          |         | This prop accepts the ID of the counterpart details to be displayed, edited or removed.                                                                                                                          |
| `onAddressUpdate`  | `function`                        |         | Triggered when an existing counterpart's address is updated.                                                                                                                                                     |
| `onBankCreate`     | `function`                        |         | Triggered when a new bank account is created for an existing counterpart.                                                                                                                                        |
| `onBankDelete`     | `function`                        |         | Triggered when an existing counterpart's bank account is deleted.                                                                                                                                                |
| `onBankUpdate`     | `function`                        |         | Triggered when an existing counterpart's bank account is edited.                                                                                                                                                 |
| `onContactCreate`  | `function`                        |         | Triggered when new contact information is created for an existing counterpart.                                                                                                                                   |
| `onContactDelete`  | `function`                        |         | Triggered when an existing counterpart's contact information is deleted.                                                                                                                                         |
| `onContactUpdate`  | `function`                        |         | Triggered when an existing counterpart's contact information is updated.                                                                                                                                         |
| `onCreate`         | `function`                        |         | This callback can be triggered when a new counterpart is created.                                                                                                                                                |
| `onDelete`         | `function`                        |         | This callback can be triggered when an existing counterpart is deleted.                                                                                                                                          |
| `onUpdate`         | `function`                        |         | This callback can be triggered when any of an existing counterpart's details are updated.                                                                                                                        |
| `onVatCreate`      | `function`                        |         | This callback is triggered when a new VAT ID is created for a counterpart.                                                                                                                                       |
| `onVatDelete`      | `function`                        |         | This callback is triggered when a counterpart's VAT ID is deleted.                                                                                                                                               |
| `onVatUpdate`      | `function`                        |         | This callback is triggered when a counterpart's VAT information is updated.                                                                                                                                      |
| `showBankAccounts` | `boolean`                         | `true`  | This determines whether or not the counterpart's bank account data will be shown on the Counterpart details page.                                                                                                |
| `showCategories`   | `boolean`                         | `true`  | This determines whether or not the "**Type**" field will be shown on the counterpart details page. It also determines if the "**counterpart type**" checkbox will be displayed on the counterpart creation form. |
| `type`             | `("individual"\| "organization")` |         | This accepts the type of counterpart to be created.                                                                                                                                                              |