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

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