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