> ## 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.

# Theming and 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,
    minDepositUsd: 1,
    maxDepositUsd: 10000,
    feeSponsored: true,
  }}
/>
```

### Properties

| Property         | Type      | Default | Description                                                                                                                                           |
| ---------------- | --------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
| `showBackButton` | `boolean` | `true`  | Show the back 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`.                                                          |

### History

Deposit and withdraw history is reachable before a transaction and from terminal screens, but hidden during signing, submission, polling, and external provider steps. Its status badge can report work in progress or an eligible failure that needs the user.

History remains read-only when `signRecovery` is omitted: fallback lookup is hidden and the badge does not promise recovery. Scope, badge behavior, signing, and proxy requirements are covered in [history and recovery](/deposits/overview/widget/history-and-recovery).