> ## 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`, `branding`, 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`.

## Branding

Replace the modal header logo and title with your own.

```tsx theme={null}
<DepositModal
  // ...required props
  branding={{
    logoUrl: "https://your-app.com/logo.png",
    title: "My App",
  }}
/>
```

### Properties

| Property  | Type     | Default                    | Description                    |
| --------- | -------- | -------------------------- | ------------------------------ |
| `logoUrl` | `string` | Rhinestone logo            | Image URL for the modal header |
| `title`   | `string` | `"Deposit"` / `"Withdraw"` | Header title text              |

## UI configuration

Toggle UI elements and set deposit constraints via `uiConfig`.

```tsx theme={null}
<DepositModal
  // ...required props
  uiConfig={{
    showLogo: true,
    showStepper: true,
    balance: { title: "Wallet balance" },
    minDepositUsd: 1,
    maxDepositUsd: 10000,
  }}
/>
```

### Properties

| Property         | Type                                 | Default | Description                                                                                        |
| ---------------- | ------------------------------------ | ------- | -------------------------------------------------------------------------------------------------- |
| `showLogo`       | `boolean`                            | `false` | Show the branding logo in the header                                                               |
| `showStepper`    | `boolean`                            | `false` | Show the progress stepper                                                                          |
| `showBackButton` | `boolean`                            | `true`  | Show the back button in the header                                                                 |
| `balance`        | `{ title: string, amount?: string }` | —       | Custom balance display. `title` sets the label, `amount` optionally overrides the displayed value. |
| `maxDepositUsd`  | `number`                             | —       | Maximum deposit amount in USD                                                                      |
| `minDepositUsd`  | `number`                             | —       | Minimum deposit amount in USD                                                                      |