@coinbase/cdp-react
components in your application.
cdp-react
installed:CDPReactProvider
, providing the necessary context for hooks and components to work correctly with CDP. It also provides access to config data and theming.
"use client"
requirements and common gotchas.main.tsx
or App.tsx
) to include the provider:
AuthButton
component to your application. This component handles both sign-in and sign-out functionality.
@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.
theme
object to the CDPReactProvider
:
Partial<Theme>
, so you only need to include the variables you want to customize. Any variables you don’t specify will use CDP React’s default values.colors-fg-default
changes the default text color across inputs, pages, and links.
Token | Description | CSS variable mapping |
---|---|---|
Backgrounds | ||
colors-bg-default | Default page and input background | --cdp-web-colors-page-bg-default , --cdp-web-colors-input-bg-default |
colors-bg-alternate | Alternate backgrounds (e.g. cards) | (not mapped in this version) |
colors-bg-overlay | Overlay UI (e.g. modals). Defaults to 33% opacity of colors-bg-alternate | --cdp-web-colors-bg-overlay |
colors-bg-skeleton | Loading placeholders. Defaults to 10% opacity of colors-fg-default | --cdp-web-colors-bg-skeleton |
colors-bg-primary | Primary brand background (e.g. CTA) | --cdp-web-colors-cta-primary-bg-default |
colors-bg-secondary | Secondary background (e.g. secondary CTA) | --cdp-web-colors-cta-secondary-bg-default |
Text | ||
colors-fg-default | Default text color | --cdp-web-colors-page-text-default , --cdp-web-colors-input-text-default , --cdp-web-colors-link-secondary-text-default |
colors-fg-muted | Muted/placeholder text | --cdp-web-colors-page-text-muted , --cdp-web-colors-input-placeholder-default |
colors-fg-primary | Primary action text (e.g. links) | --cdp-web-colors-link-primary-text-default |
colors-fg-onPrimary | Text on primary backgrounds | --cdp-web-colors-cta-primary-text-default |
colors-fg-onSecondary | Text on secondary backgrounds | --cdp-web-colors-cta-secondary-text-default |
colors-fg-positive | Success messaging text | --cdp-web-colors-fg-positive |
colors-fg-negative | Error messaging text | --cdp-web-colors-fg-negative |
Borders | ||
colors-line-default | Standard borders (e.g. dividers) | --cdp-web-colors-page-border-default |
colors-line-heavy | Input borders | --cdp-web-colors-input-border-default |
colors-line-primary | Focus/active borders | --cdp-web-colors-cta-primary-border-focus , --cdp-web-colors-cta-secondary-border-focus , --cdp-web-colors-input-border-focus |
colors-line-positive | Success state borders | (not mapped in this version) |
colors-line-negative | Error borders | --cdp-web-colors-input-border-error |
Typography | ||
font-family-sans | Sans-serif font family | Applied globally |
font-size-base | Base font size | Applied globally |
Smart color defaults
colors-bg-overlay
: Automatically uses 33% opacity of colors-bg-alternate
colors-bg-skeleton
: Automatically uses 10% opacity of colors-fg-default
colors-bg-alternate
and colors-fg-default
, the overlay and skeleton colors will automatically adjust to complement your theme with no additional configuration needed.colors-bg-primary
updates all components that inherit from that color without additional CSS overrides.