Skip to main content
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. 
<DepositModal
  // ...required props
  theme={{
    mode: "dark",
    radius: "lg",
    ctaColor: "#0066FF",
    ctaHoverColor: "#0052CC",
  }}
/>

​
Properties

PropertyTypeDefaultDescription
mode"light" | "dark""light"Color mode
radius"none" | "sm" | "md" | "lg" | "full""md"Border radius preset
fontColorstring—Primary text color
iconColorstring—Icon color
ctaColorstring—Call-to-action button background
ctaHoverColorstring—CTA button hover background
borderColorstring—Border color
backgroundColorstring—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. 
<DepositModal
  // ...required props
  branding={{
    logoUrl: "https://your-app.com/logo.png",
    title: "My App",
  }}
/>

​
Properties

PropertyTypeDefaultDescription
logoUrlstringRhinestone logoImage URL for the modal header
titlestring"Deposit" / "Withdraw"Header title text

​
UI configuration

Toggle UI elements and set deposit constraints via uiConfig. 
<DepositModal
  // ...required props
  uiConfig={{
    showLogo: true,
    showStepper: true,
    balance: { title: "Wallet balance" },
    minDepositUsd: 1,
    maxDepositUsd: 10000,
  }}
/>

​
Properties

PropertyTypeDefaultDescription
showLogobooleanfalseShow the branding logo in the header
showStepperbooleanfalseShow the progress stepper
showBackButtonbooleantrueShow the back button in the header
balance{ title: string, amount?: string }—Custom balance display. title sets the label, amount optionally overrides the displayed value.
maxDepositUsdnumber—Maximum deposit amount in USD
minDepositUsdnumber—Minimum deposit amount in USD