Customize the style of the embedded checkout by adding a uiConfig object to the CrossmintPaymentElement:

<CrossmintPaymentElement
  // other props removed for brevity
  uiConfig={{
    borderRadius: "4px",
    colors: {
      background: "#F0F4F8",
      backgroundSecondary: "#FFFFFF",
    },
  }}
/>

Themes

Explore the following templates:

  • Minty Light

  • Minty Dark

  • Solarized Light

  • Solarized Dark

  • Material Light

  • Material Dark

uiConfig
{
  fontSizeBase: "0.91rem",
  fontWeightPrimary: "400",
  fontWeightSecondary: "500",
  spacingUnit: "0.274rem",
  borderRadius: "4px",
  colors: {
    background: "#F0F4F8",
    backgroundSecondary: "#FFFFFF",
    backgroundTertiary: "#49d7a8",
    textPrimary: "#333333",
    textSecondary: "#FFFFFF",
    border: "#B2BEC3",
    danger: "#FF6B6B",
    textLink: "#4D9078",
  }
}

Property Reference

uiConfig
object

Background Color

Text Color

Typography

Input Fields