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
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",
},
},
}}
/>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" }
]
}}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"
}
}
}}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:
DestinationInput, provide recipient.walletAddressReceiptEmailInput, provide payment.receiptEmailCustomize 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"
}
}
}
}
}}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"
}
}
}
}
}}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"
}
}
}
}}Was this page helpful?