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

# Contract List

The `Contract List` component is a React component that renders the list of contracts created by a specific
client (clientKey). This component is integrated with the `Contract Editor` component, allowing users to
open existing contracts and create new ones via the `Contract List` component.

### Preview

<Frame caption="List">
  <img src="https://mintcdn.com/sendforsign/bDeZDTsZ_41-V2Bk/sdk/img/list.png?fit=max&auto=format&n=bDeZDTsZ_41-V2Bk&q=85&s=8019f66a6e2376697155b063ac54620c" width="1434" height="1136" data-path="sdk/img/list.png" />
</Frame>

## Usage

First, install [Sendforsign components.](/sdk/introsdk#installation)
After that:

<CodeGroup>
  ```typescript App.tsx theme={null}
  import { ContractList } from 'sendforsign';

  <ContractList
    token='YourClientToken'
  />
  ```
</CodeGroup>

## Props

| Prop | Type | Default | Description |
| - | - | - | - |
| `apiKey` | `string` | | Use only for testing purposes. API key for your platform. |
| `clientKey` | `string` | | Use only for testing purposes. Client key for the account that is using the infrastructure. |
| `token` | `string` | | Client token refers to the client that is using the infrastructure. Learn more about client tokens [here](/api-reference/implementation_server#generate-client-tokens). |
| `userKey` | `string` | | User key for the user who is creating a contract. |
| `isModal` | `boolean` | `true` | If `false`, every click on the table row will save the contractKey to local storage. If `true`, a click on the table row will open a modal window with the contract rendered. |


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.