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.

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

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