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

# Build your own integration UI with Rollout Link components

Rollout Link supports multiple levels of customization depending on how much of the authentication experience you want to own.

* Use `<CredentialsManager />` when you want the full built-in credential management UI.
* Use `<CredentialForm />` when you want a connector-specific experience that shows either the add flow or the connected credential.
* Use `<AddCredentialForm />` when you only want to render the credential creation flow.
* Use `useCredentials()` when you want to fetch connected credentials and build your own list or state-driven UI.

## CredentialForm

`<CredentialForm />` is the best fit when you want a connector-specific component but still want Rollout to handle the credential lifecycle for that connector.

It will:

* render the add flow when no credential exists for the connector
* render the connected credential when one already exists
* support credential deletion

```javascript theme={null}
import { CredentialForm } from "@rollout/link-react";

function Rollout() {
  return (
    <CredentialForm appKey="lofty" />
  );
}
```

Useful props include:

* `appKey`
* `plan`
* `entitiesToSync`
* `fieldOverrides`
* `showUserTermsLink`
* `onCredentialAdded`
* `onCredentialDeleted`

## AddCredentialForm

`<AddCredentialForm />` renders only the connector-specific auth flow. It does not render a credential list, which makes it a better fit when your app already controls the surrounding UI and state.

```javascript theme={null}
import { AddCredentialForm } from "@rollout/link-react";

function Rollout() {
  return (
    <AddCredentialForm
      appKey="lofty"
      onCredentialAdded={({ id, appKey }) => {
        console.log("Credential added", id, appKey);
      }}
    />
  );
}
```

Useful props include:

* `appKey`
* `plan`
* `entitiesToSync`
* `fieldOverrides`
* `showUserTermsLink`
* `onCredentialAdded`

## useCredentials

`useCredentials()` returns the authenticated user's connected credentials together with loading, error, and refetch state.

Use it when you want to:

* render your own credential list
* gate UI based on whether a connector is already connected
* refresh your own state after adding or deleting credentials

```javascript theme={null}
import { useCredentials } from "@rollout/link-react";

function ConnectedCrms() {
  const { credentials, isLoading, refetch } = useCredentials();

  if (isLoading) return <div>Loading...</div>;

  const crmCredentials =
    credentials?.filter((credential) => credential.appKey === "follow-up-boss") ?? [];

  return (
    <div>
      <div>Connected credentials: {crmCredentials.length}</div>
      <button onClick={() => refetch()}>Refresh</button>
    </div>
  );
}
```

The hook returns:

* `credentials`
* `isLoading`
* `isFetching`
* `error`
* `refetch`

## Recommended pattern

Use `<CredentialForm />` if you want the simplest custom integration card for a single connector.

Use `<AddCredentialForm />` plus `useCredentials()` if you already maintain your own connected-account list elsewhere in your app.

Use `<CredentialsManager />` if you want the least amount of custom work.