Skip to main content



Customization is a premium feature. Contact to request access.

If you're interested in our fully white label solution, please reach out. The docs do not cover that section yet.

Marble SDK offers support for customizing the look and feel of the pre-built components.

Enabling customization

To enable customization, you just need to pass the customConfig object to the Marble constructor:

import { MarbleCustomConfig, MarbleStyleConfig } from "@marblexyz/common";
const customConfig: MarbleCustomConfig = {
appName?: string;
appLogoUrl?: string;
style?: MarbleStyleConfig;

// Email to get a client key
const marble = new Marble("<MARBLE_CLIENT_KEY>", {

Choosing a good appName and appLogoUrl is important. They will be displayed in the Marble Wallet UI.


Marble will show a "Powered by Marble" logo in the bottom right corner of the screen. If you want to remove it, please contact us at to request access.

Style Customization

Marble also enables developers to programmatically customize the style of the MarbleStyleConfig object:

import { MarbleStyleConfig } from "@marblexyz/common";

const styleConfig: MarbleStyleConfig = {
// Modal
modalBorder?: string;
dividerColor?: string;
backgroundColor?: string;
// Typography
textColor?: string;
secondaryTextColor?: string;
errorTextColor?: string;
infoTextColor?: string;
// Accent
primaryAccentColor?: string;
secondaryAccentColor?: string;
// Input
inputTextColor?: string;
inputBorderColor?: string;
inputBackgroundColor?: string;
inputPlaceholderColor?: string;
inputFocusBorderColor?: string;
inputErrorBorderColor?: string;
// Primary Action Button
primaryActionColor?: string;
primaryActionBorderColor?: string;
primaryActionColorHover?: string;
primaryActionColorActive?: string;
primaryActionTextColor?: string;
// Secondary Action Button
secondaryActionColor?: string;
secondaryActionBorderColor?: string;
secondaryActionColorHover?: string;
secondaryActionColorActive?: string;
secondaryActionTextColor?: string;
// Icon Button
iconButtonColor?: string;
iconButtonColorHover?: string;
iconbuttonBorderColor?: string;
iconButtonColorActive?: string;
iconButtonTextColor?: string;
// Select
selectBorderColor?: string;
selectFocusBorderColor?: string;
selectErrorBorderColor?: string;
selectBackgroundColor?: string;
selectTextColor?: string;
// Ghost button
ghostButtonColor?: string;
ghostButtonColorHover?: string;
ghostButtonColorActive?: string;
ghostButtonBorderColor?: string;
ghostButtonTextColor?: string;

// Panel specific styles
loginPanel?: {
descriptionText?: string;
showDescriptionText?: boolean;
signupPanel?: {
descriptionText?: string;
showDescriptionText?: boolean;
// Menu
menu?: {
color?: string;
borderColor?: string;
focusBorderColor?: string;
errorBorderColor?: string;
backgroundColor?: string;

Customization roadmap

In the future, we plan to support more customization features, including:

  • Component positioning.
  • Change / hide certain types of labels.
  • Typography.
  • Adding / changing icons (buttons, close modal icon type).
  • Sizing on width and height.

Do you need customization that goes beyond what is currently shown above or are in need of more flexibility? Email us at and tell us more!