Skip to main content
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. 
<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.

​
UI configuration

Toggle UI elements, set deposit constraints, and control fee display via uiConfig. 
<DepositModal
  // ...required props
  uiConfig={{
    showBackButton: true,
    showHistoryButton: true,
    minDepositUsd: 1,
    maxDepositUsd: 10000,
    feeSponsored: true,
  }}
/>

​
Properties

PropertyTypeDefaultDescription
showBackButtonbooleantrueShow the back button in the header
showHistoryButtonbooleanfalseShow the deposit history button in the header
minDepositUsdnumber—Minimum deposit amount in USD
maxDepositUsdnumber—Maximum deposit amount in USD
feeSponsoredbooleanfalseWhen true, the network/protocol fee renders struck-through on the review, processing, and result screens, with a tooltip explaining the sponsorship
feeTooltipstring—Custom copy for the fee info tooltip. Defaults to a generic message based on feeSponsored.
checkLiquiditybooleanfalseWhen 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