UI Customization
Kevo's modal adapts to your brand through a UIConfig object. You can set colors, typography, border radius, logo, and copy, all without touching any CSS.
Setting UIConfig
UI configuration can be set in two places. Both are merged, the SDK prop takes precedence over the portal setting:
1. Kevo Portal (recommended)
Set globally in project settings. Applies to all SDK instances in your project. Changes take effect without a deploy.
2. KevoProvider prop
Pass a uiConfig prop to override or supplement portal settings at the SDK level.
<KevoProvider
config={{
publishableKey: 'pk_live_xxxxxxxxxxxx',
uiConfig: {
accentColor: '#6366f1',
backgroundColor: '#0f0f0f',
foregroundColor: '#f9fafb',
borderRadius: 20,
logoUrl: 'https://yourapp.com/logo.png',
fontFamily: 'Inter, sans-serif',
buttonTextColor: '#ffffff',
inputBorderColor: '#374151',
modalTitle: 'Sign in to YourApp',
subtitleText: 'Connect your wallet or use email',
showPoweredBy: false,
overlayBlur: 4,
modalMaxWidth: 420,
socialButtonStyle: 'filled',
hideSigningConfirmations: false,
},
}}
>UIConfig Reference
| Prop | Type | Description |
|---|---|---|
accentColor* | string | Primary brand color. Used for buttons, focus rings, and highlighted states. |
backgroundColor* | string | Modal background color. |
foregroundColor* | string | Primary text color for headings and labels. |
borderRadius* | number | Corner radius in pixels for the modal and buttons. |
logoUrl* | string | URL to your logo image. Displayed at the top of the modal. Leave empty to hide. |
fontFamily | string | CSS font-family string for all modal text. |
buttonTextColor | string | Text color on filled buttons. Defaults to white or black based on accentColor luminance. |
inputBorderColor | string | Border color for text inputs (email field, OTP field). |
modalTitle | string | Heading text displayed at the top of the modal. |
subtitleText | string | Optional subtitle text below the heading. |
showPoweredBy | boolean | Shows a "Powered by Kevo" badge at the bottom of the modal. |
overlayBlur | number | Backdrop blur amount in pixels behind the modal overlay. |
modalMaxWidth | number | Maximum width of the modal in pixels. |
socialButtonStyle | "outline" | "filled" | Style of social auth buttons. "filled" uses accentColor as background. |
hideSigningConfirmations | boolean | If true, signing and transaction confirmation popups are suppressed. |
Color Recommendations
Kevo uses your accentColor for interactive elements. For best results:
Contrast ratio: Ensure at least 4.5:1 contrast between accentColor and buttonTextColor for WCAG AA compliance.
Dark mode: For dark UIs, set backgroundColor to your dark surface color and foregroundColor to near-white.
Brand match: Use the exact same accentColor as your primary CTA buttons for visual consistency.
Examples
Dark theme
uiConfig={{
accentColor: '#6366f1',
backgroundColor: '#0f0f0f',
foregroundColor: '#f9fafb',
inputBorderColor: '#374151',
borderRadius: 16,
socialButtonStyle: 'filled',
showPoweredBy: false,
}}Minimal light theme
uiConfig={{
accentColor: '#000000',
backgroundColor: '#ffffff',
foregroundColor: '#111827',
borderRadius: 8,
socialButtonStyle: 'outline',
showPoweredBy: true,
}}Brand color
uiConfig={{
accentColor: '#10b981', // emerald brand color
backgroundColor: '#f0fdf4',
foregroundColor: '#064e3b',
buttonTextColor: '#ffffff',
borderRadius: 24,
modalTitle: 'Join GreenApp',
subtitleText: 'No seed phrases. No complexity.',
}}uiConfig in the Kevo Portal without redeploying your app. Changes are fetched at runtime when KevoProvider initializes.