UI Customization

Learn how to customize the Embedded Checkout UI to match your brand identity and design system

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

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

Input Visibility

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

Labels

Customize label styling:

appearance={{
    rules: {
        Label: {
            font: {
                family: "Inter",
                size: "14px",
                weight: "500",
            },
            colors: {
                text: "#333333",
            },
        },
    },
}}

Input Fields

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)",
                },
            },
        },
    },
}}

Tabs

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",
                },
            },
        },
    },
}}

Primary Buttons

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"
      }
    }
  }
}}

Related Resources

• Payment Methods
• React Hooks
• Order Lifecycle
• Testing Tips