Skip to main content
The SDK widgets are standalone: import any of Fund, Pay, Swap, Withdraw, or Earn and render them directly. There is no provider wrapper to set up. Each component takes an apiKey and its mode-specific configuration as props.

​
Shared component props

These props apply to all mode components: Fund, Pay, Swap, Withdraw, and Earn.

​
Appearance

PropTypeDefaultDescription
theme"light" | "dark" | "auto""auto"Color scheme
customCssstring | objectnoneCSS variable overrides injected into the widget
renderInlinebooleanfalseRender embedded in the page instead of as a modal
disableCssbooleanfalseDisable all default styles for fully custom implementations

​
Wallet

PropTypeDescription
walletConnectProjectIdstringWalletConnect project ID
wagmiConnectorsarrayCustom wagmi connectors
hideDisconnectbooleanHide the disconnect wallet option
hideAddWalletbooleanHide the add wallet option

​
Route behavior

PropTypeDescription
slippageTolerancestring | numberPer-widget slippage override
swapProviderstringPreferred swap provider
paymentMethodstringPre-select the funding method: "CONNECTED_WALLET", "CRYPTO_TRANSFER", "CREDIT_DEBIT_CARD", or "EXCHANGE"

​
Chain identifier

The chain field accepts any of:
  • Chain name string: "polygon", "ethereum", "base"
  • Numeric chain ID: 137, 1, 8453
  • A viem chain object

​
Per-component props

For Fund-, Pay-, Swap-, Withdraw-, and Earn-specific props, see the dedicated component pages.

​
Customization with CSS variables

Pass CSS variable overrides via the customCss prop. Variables can reference your design system tokens. 
<Fund
  apiKey="YOUR_API_KEY"
  customCss={{
    "--trails-primary": "var(--your-brand-color)",
    "--trails-font-family": "Inter, sans-serif",
    "--trails-border-radius": "8px",
  }}
  to={{ recipient: "0xYOUR_WALLET", chain: "polygon", token: "USDC" }}
/>

​
Key CSS variables

VariableControls
--trails-primaryPrimary action color
--trails-primary-hoverHover state for primary elements
--trails-font-familyWidget font family
--trails-border-radiusWidget container corner radius
--trails-focus-ringKeyboard focus indicator color
The full variable list (60+ variables) covers typography, spacing, backgrounds, borders, inputs, and status colors.