This package contains ready-made, customizable React UI components that wrap
the CDP frontend SDK.

Components

- {@link SignInModal | SignInModal} - a button that triggers a modal with the sign-in flow
- {@link SignIn | SignIn} - the forms for the sign in flow, a logo, heading, and description text
- {@link SignOutButton | SignOutButton} - a sign out button
- {@link AuthButton | AuthButton} - the SignOutButton when logged in, and the SignInModal when logged out
- {@link SendEvmTransactionButton | SendEvmTransactionButton} - a button that signs and sends an EVM transaction
- {@link SendSolanaTransactionButton | SendSolanaTransactionButton} - a button that signs and sends a Solana transaction
- {@link Fund | Fund} - the fund flow
- {@link FundModal | FundModal} - a button that triggers a modal with the fund flow
- {@link LinkAuth | LinkAuth} - a component to link or unlink auth methods
- {@link LinkAuthModal | LinkAuthModal} - a button that triggers a modal with the link / unlink flow
- {@link CopyAddress | CopyAddress} - a component that renders a truncated address with a copy button
- {@link CopyEvmKeyButton | CopyEvmKeyButton} - a button for copying the private key of a user's EVM EOA address
- {@link CopySolanaKeyButton | CopySolanaKeyButton} - a button for copying the private key of a user's Solana address
- {@link ExportWallet | ExportWallet} - a component for exporting a user's wallet; includes a title, a warning about keeping private keys secure, the CopyAddress component, and either the CopyEvmKeyButton or CopySolanaKeyButton depending on the type of address provided
- {@link ExportWalletModal | ExportWalletModal} - a button that triggers a modal with the ExportWallet component
- {@link EnrollMfa | EnrollMfa} - a component for MFA enrollment; guides users through setting up two-factor authentication via TOTP
- {@link EnrollMfaModal | EnrollMfaModal} - a button that triggers a modal with the MFA enrollment flow
- {@link VerifyMfa | VerifyMfa} - a component for MFA verification; prompts enrolled users to enter their authenticator code
- {@link VerifyMfaModal | VerifyMfaModal} - a button that triggers a modal with the MFA verification flow
- {@link VerifyMfaInline | VerifyMfaInline} - a wrapper component for embedding MFA verification within existing UI flows

Quickstart

This guide will help you get started with @coinbase/cdp-react. You'll learn how to install the package, set up the provider, and render your first component.

$3

First, add the package to your project using your preferred package manager.

``bash


With pnpm

pnpm add @coinbase/cdp-react @coinbase/cdp-core @coinbase/cdp-hooks

With yarn

yarn add @coinbase/cdp-react @coinbase/cdp-core @coinbase/cdp-hooks

With npm

npm install @coinbase/cdp-react @coinbase/cdp-core @coinbase/cdp-hooks
`

$3

1. Sign in or create an account on the CDP Portal
2. On your dashboard, select a project from the dropdown at the at the top, and copy the Project ID

$3

1. Navigate to the Embedded Wallet Configuration
in CDP Portal, and click Add origin to include your local app
2. Enter the origin of your locally running app - e.g., http://localhost:3000
3. Click Add origin again to save your changes

$3

Next, you need to wrap your application with the CDPReactProvider.

CDPReactProvider provides the necessary context for hooks and components to work correctly. It also provides access to config data and theming.

Update your main application file (e.g., main.tsx or App.tsx) to include the provider:

`tsx lines
import React from 'react';
import ReactDOM from 'react-dom/client';
import { App } from './App'; // Your main App component
import { CDPReactProvider, type Config, type Theme } from '@coinbase/cdp-react';

// Config for your dapp
const config: Config = {
projectId: "your-project-id", // Copy your Project ID here.
appName: "My app", // the name of your application
appLogoUrl: "https://picsum.photos/64", // logo will be displayed in select components
}

// You can customize the theme by overriding theme variables
const themeOverrides: Partial = {
"colors-bg-default": "black",
"colors-bg-alternate": "#121212",
"colors-fg-default": "white",
"colors-fg-muted": "#999999",
}

ReactDOM.createRoot(document.getElementById('root')!).render(




,
);
`

#### Analytics Opt-Out

By default the SDK will emit usage analytics to help us improve the SDK. If you would like to opt-out, you can do so by setting the disableAnalytics configuration option to true.

`tsx lines
config={{
projectId: "your-project-id",
disableAnalytics: true,
}}
>


`

$3

Now you can use the components from the library. Let's add the AuthButton component to your application. This component handles both sign-in and sign-out functionality.

`tsx lines
// In your App.tsx or any other component
import { AuthButton } from '@coinbase/cdp-react/components/AuthButton';

function App() {
return (


);
}

export default App;

`

That's it! You've successfully installed @coinbase/cdp-react`, set up the provider, and rendered your first component.