Build your own integration UI with Rollout Link components

• 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

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

import { CredentialForm } from "@rollout/link-react";

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

• appKey
• plan
• entitiesToSync
• fieldOverrides
• showUserTermsLink
• onCredentialAdded
• onCredentialDeleted

​

AddCredentialForm

import { AddCredentialForm } from "@rollout/link-react";

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

• appKey
• plan
• entitiesToSync
• fieldOverrides
• showUserTermsLink
• onCredentialAdded

​

useCredentials

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

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>
  );
}

• credentials
• isLoading
• isFetching
• error
• refetch

​

Recommended pattern