> ## Documentation Index
> Fetch the complete documentation index at: https://docs.polygon.technology/llms.txt
> Use this file to discover all available pages before exploring further.

# SDK configuration

> Shared props reference for all Trails widget components.

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.

```tsx theme={null}
<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.