Skip to main content
If you are using our previous version of embedded checkout, please refer to the old UI customization guide

​
Quick Start

The checkout UI can be customized using the appearance prop: 
<CrossmintEmbeddedCheckout
    appearance={{
        fonts: [{ cssSrc: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" }],
        variables: {
            fontFamily: "Inter, system-ui, sans-serif",
            colors: {
                backgroundPrimary: "#ffffff",
                textPrimary: "#000000",
                accent: "#0074D9",
            },
        },
    }}
/>

​
Customization Options

​
Background Customization

The embedded checkout component has a transparent background by default. The backgroundPrimary color in the appearance configuration only affects internal components (inputs, cards, etc.) within the iframe, not the iframe body itself. To customize the overall background, wrap the component in a div with your desired background styling:

​
Solid Background Colors

{
    /* Tailwind CSS */
}
<div className="bg-gray-900">
    <CrossmintEmbeddedCheckout {...props} />
</div>;

{
    /* Custom CSS */
}
<div style={{ backgroundColor: "#1a1a1a" }}>
    <CrossmintEmbeddedCheckout {...props} />
</div>;
Remember that the backgroundPrimary color in your appearance configuration should complement your wrapper background for the best visual result.

​
Custom Fonts

Load custom fonts using the fonts array: 
appearance={{
  fonts: [
    { cssSrc: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" },
    { cssSrc: "https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" }
  ]
}}

​
Global Variables

Control the overall look and feel with these global variables: 
appearance={{
  variables: {
    // Typography
    fontFamily: "Inter, system-ui, sans-serif",
    fontSizeUnit: "16px",

    // Spacing
    spacingUnit: "1rem",
    borderRadius: "8px",

    // Colors
    colors: {
      borderPrimary: "#E0E0E0",
      backgroundPrimary: "#FFFFFF",
      textPrimary: "#000000",
      textSecondary: "#666666",
      danger: "#FF0000",
      warning: "#FFA500",
      accent: "#0074D9"
    }
  }
}}

​
Component Rules

Control the visibility of specific inputs:
appearance={{
  rules: {
    DestinationInput: {
      display: "hidden"  // Hides the wallet address input
    },
    ReceiptEmailInput: {
      display: "hidden"  // Hides the email input
    }
  }
}}
When hiding inputs, make sure to provide the corresponding values via props:
  • For hidden DestinationInput, provide recipient.walletAddress
  • For hidden ReceiptEmailInput, provide payment.receiptEmail
Customize label styling:
appearance={{
    rules: {
        Label: {
            font: {
                family: "Inter",
                size: "14px",
                weight: "500",
            },
            colors: {
                text: "#333333",
            },
        },
    },
}}
Style input fields:
appearance={{
    rules: {
        Input: {
            borderRadius: "8px",
            font: {
                family: "Inter",
                size: "16px",
                weight: "400",
            },
            colors: {
                text: "#000000",
                background: "#FFFFFF",
                border: "#E0E0E0",
                boxShadow: "none",
                placeholder: "#999999",
            },
            hover: {
                colors: {
                    border: "#0074D9",
                },
            },
            focus: {
                colors: {
                    border: "#0074D9",
                    boxShadow: "0 0 0 2px rgba(0,116,217,0.2)",
                },
            },
        },
    },
}}
Customize tab appearance:
appearance={{
    rules: {
        Tab: {
            borderRadius: "4px",
            font: {
                family: "Inter",
                size: "14px",
                weight: "500",
            },
            colors: {
                text: "#666666",
                background: "transparent",
            },
            selected: {
                colors: {
                    text: "#000000",
                    background: "#F5F5F5",
                },
            },
            hover: {
                colors: {
                    background: "#F0F0F0",
                },
            },
        },
    },
}}
Style primary buttons:
appearance={{
  rules: {
    PrimaryButton: {
      borderRadius: "8px",
      font: {
        family: "Inter",
        size: "16px",
        weight: "600"
      },
      colors: {
        text: "#FFFFFF",
        background: "#0074D9"
      },
      hover: {
        colors: {
          background: "#0063B8"
        }
      },
      disabled: {
        colors: {
          text: "#FFFFFF",
          background: "#CCCCCC"
        }
      }
    }
  }
}}

​
Common Examples

​
Modern Dark Theme

appearance={{
  variables: {
    fontFamily: "Inter, system-ui, sans-serif",
    colors: {
      backgroundPrimary: "#1A1A1A",
      textPrimary: "#FFFFFF",
      textSecondary: "#A0A0A0",
      borderPrimary: "#333333",
      accent: "#7928CA"
    }
  },
  rules: {
    Input: {
      colors: {
        background: "#2D2D2D",
        border: "#404040",
        text: "#FFFFFF",
        placeholder: "#666666"
      }
    },
    PrimaryButton: {
      colors: {
        background: "#7928CA",
        text: "#FFFFFF"
      },
      hover: {
        colors: {
          background: "#6B24B2"
        }
      }
    }
  }
}}

​
Minimal Light Theme

appearance={{
  variables: {
    fontFamily: "system-ui, sans-serif",
    borderRadius: "4px",
    colors: {
      backgroundPrimary: "#FFFFFF",
      textPrimary: "#000000",
      borderPrimary: "#E0E0E0",
      accent: "#000000"
    }
  },
  rules: {
    Input: {
      borderRadius: "4px",
      colors: {
        background: "#F5F5F5",
        border: "transparent"
      },
      focus: {
        colors: {
          border: "#000000",
          boxShadow: "none"
        }
      }
    },
    PrimaryButton: {
      borderRadius: "4px",
      colors: {
        background: "#000000",
        text: "#FFFFFF"
      }
    }
  }
}}
⌘I