SDK configuration

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

Prop	Type	Default	Description
`theme`	`"light"` \| `"dark"` \| `"auto"`	`"auto"`	Color scheme
`customCss`	string \| object	none	CSS variable overrides injected into the widget
`renderInline`	boolean	`false`	Render embedded in the page instead of as a modal
`disableCss`	boolean	`false`	Disable all default styles for fully custom implementations

Wallet

Prop	Type	Description
`walletConnectProjectId`	string	WalletConnect project ID
`wagmiConnectors`	array	Custom wagmi connectors
`hideDisconnect`	boolean	Hide the disconnect wallet option
`hideAddWallet`	boolean	Hide the add wallet option

Route behavior

Prop	Type	Description
`slippageTolerance`	string \| number	Per-widget slippage override
`swapProvider`	string	Preferred swap provider
`paymentMethod`	string	Pre-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

Variable	Controls
`--trails-primary`	Primary action color
`--trails-primary-hover`	Hover state for primary elements
`--trails-font-family`	Widget font family
`--trails-border-radius`	Widget container corner radius
`--trails-focus-ring`	Keyboard focus indicator color

The full variable list (60+ variables) covers typography, spacing, backgrounds, borders, inputs, and status colors.

Cross-chain

SDK

Trails API Reference

Shared component props

Appearance

Wallet

Route behavior

Chain identifier

Per-component props

Customization with CSS variables

Key CSS variables

​Shared component props

​Appearance

​Wallet

​Route behavior

​Chain identifier

​Per-component props

​Customization with CSS variables

​Key CSS variables

Shared component props

Appearance

Wallet

Route behavior

Chain identifier

Per-component props

Customization with CSS variables

Key CSS variables