​
Overview

CDP React components provide pre-built, customizable UI elements for common wallet and authentication flows, built on top of the CDP Embedded Wallets SDK. This guide will help you get started with @coinbase/cdp-react components in your application.
Check out the CDP Web SDK reference for comprehensive method signatures, types, and examples.

​
Prerequisites

The fastest way to get started is to complete the Quickstart. If you already have your own app, you should complete the prerequisites below before proceeding. You will need:
  1. A CDP Portal account and CDP project
  2. Node.js 22+ installed
  3. Your local app domain configured in CDP Portal
  4. A package manager of your choice, with cdp-react installed:
# With pnpm
pnpm add @coinbase/cdp-react @coinbase/cdp-core @coinbase/cdp-hooks

​
1. Setup React provider

Wrap your application with the CDPReactProvider, providing the necessary context for hooks and components to work correctly with CDP. It also provides access to config data and theming.
Using Next.js? Check out our Next.js integration guide for "use client" requirements and common gotchas.
Update your main application file (e.g., main.tsx or App.tsx) to include the provider: 
import React from 'react';
import ReactDOM from 'react-dom/client';
import { App } from './App'; // Your main App component
import { type Config } from '@coinbase/cdp-core';
import { CDPReactProvider, type AppConfig, type Theme } from '@coinbase/cdp-react';

// Your CDP config
const cdpConfig: Config = {
  projectId: "your-project-id", // Replace with your Project ID from CDP Portal
  basePath: "https://api.cdp.coinbase.com", // CDP API url
  useMock: false, // Use live APIs or use mock data for testing
  debugging: false, // Log API requests and responses
}

// Global config for your dapp
const appConfig: AppConfig = {
  name: "My app", // the name of your application
  logoUrl: "https://picsum.photos/64", // logo will be displayed in select components
}

// You can customize the theme by overriding theme variables
const themeOverrides: Partial<Theme> = {
  "colors-background": "black",
  "colors-backgroundOverlay": "rgba(0,0,0,0.5)",
  "colors-text": "white",
  "colors-textSecondary": "#999999",
}

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <CDPReactProvider config={cdpConfig} app={appConfig} theme={themeOverrides}>
      <App />
    </CDPReactProvider>
  </React.StrictMode>,
);

​
2. Render a CDP component

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. 
// In your App.tsx or any other component
import { AuthButton } from '@coinbase/cdp-react/components/AuthButton';

function App() {
  return (
    <div>
      <h1>Welcome</h1>
      <AuthButton />
    </div>
  );
}

export default App;
That’s it! You’ve successfully installed @coinbase/cdp-react, set up the provider, and rendered your first component. Find all available components and their documentation in the CDP React module reference.