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

# Customization

> Theme, brand, and configure the deposit widget to match your app.

The deposit and withdraw modals accept `theme` and `uiConfig` props to control appearance and behavior.

## Theme

Pass a `theme` object to control the modal's visual style.

```tsx theme={null}
<DepositModal
  // ...required props
  theme={{
    mode: "dark",
    radius: "lg",
    ctaColor: "#0066FF",
    ctaHoverColor: "#0052CC",
  }}
/>
```

### Properties

| Property          | Type                                               | Default   | Description                      |
| ----------------- | -------------------------------------------------- | --------- | -------------------------------- |
| `mode`            | `"light"` \| `"dark"`                              | `"light"` | Color mode                       |
| `radius`          | `"none"` \| `"sm"` \| `"md"` \| `"lg"` \| `"full"` | `"md"`    | Border radius preset             |
| `fontColor`       | `string`                                           | —         | Primary text color               |
| `iconColor`       | `string`                                           | —         | Icon color                       |
| `ctaColor`        | `string`                                           | —         | Call-to-action button background |
| `ctaHoverColor`   | `string`                                           | —         | CTA button hover background      |
| `borderColor`     | `string`                                           | —         | Border color                     |
| `backgroundColor` | `string`                                           | —         | Modal background color           |

All color values accept any CSS color string (hex, rgb, hsl, etc.). Omitted properties use the design system defaults for the selected `mode`.

## UI configuration

Toggle UI elements, set deposit constraints, and control fee display via `uiConfig`.

```tsx theme={null}
<DepositModal
  // ...required props
  uiConfig={{
    showBackButton: true,
    showHistoryButton: true,
    minDepositUsd: 1,
    maxDepositUsd: 10000,
    feeSponsored: true,
  }}
/>
```

### Properties

| Property            | Type      | Default | Description                                                                                                                                                                                        |
| ------------------- | --------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `showBackButton`    | `boolean` | `true`  | Show the back button in the header                                                                                                                                                                 |
| `showHistoryButton` | `boolean` | `false` | Show the deposit history button in the header                                                                                                                                                      |
| `minDepositUsd`     | `number`  | —       | Minimum deposit amount in USD                                                                                                                                                                      |
| `maxDepositUsd`     | `number`  | —       | Maximum deposit amount in USD                                                                                                                                                                      |
| `feeSponsored`      | `boolean` | `false` | When `true`, the network/protocol fee renders struck-through on the review, processing, and result screens, with a tooltip explaining the sponsorship                                              |
| `feeTooltip`        | `string`  | —       | Custom copy for the fee info tooltip. Defaults to a generic message based on `feeSponsored`.                                                                                                       |
| `checkLiquidity`    | `boolean` | `false` | When `true`, runs an orchestrator liquidity check as the user continues from the amount step and surfaces an "unavailable / check failed" warning on the review screen. Does not block the deposit |