> ## Documentation Index
> Fetch the complete documentation index at: https://docs.crossmint.com/llms.txt
> Use this file to discover all available pages before exploring further.

# UI Customization

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

## Quick Start

The checkout UI can be customized using the `appearance` prop:

```jsx theme={null}
<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

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

{
    /* Custom CSS */
}
<div style={{ backgroundColor: "#1a1a1a" }}>
    <CrossmintEmbeddedCheckout {...props} />
</div>;
```

<Note>
  Remember that the `backgroundPrimary` color in your appearance configuration should complement your wrapper
  background for the best visual result.
</Note>

### Custom Fonts

Load custom fonts using the `fonts` array:

```jsx theme={null}
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:

```jsx theme={null}
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

<AccordionGroup>
  <Accordion title="Input Visibility">
    Control the visibility of specific inputs:

    ```jsx theme={null}
    appearance={{
      rules: {
        DestinationInput: {
          display: "hidden"  // Hides the wallet address input
        },
        ReceiptEmailInput: {
          display: "hidden"  // Hides the email input
        }
      }
    }}
    ```

    <Note>
      When hiding inputs, make sure to provide the corresponding values via props:

      * For hidden `DestinationInput`, provide `recipient.walletAddress`
      * For hidden `ReceiptEmailInput`, provide `payment.receiptEmail`
    </Note>
  </Accordion>

  <Accordion title="Labels">
    Customize label styling:

    ```jsx theme={null}
    appearance={{
        rules: {
            Label: {
                font: {
                    family: "Inter",
                    size: "14px",
                    weight: "500",
                },
                colors: {
                    text: "#333333",
                },
            },
        },
    }}
    ```
  </Accordion>

  <Accordion title="Input Fields">
    Style input fields:

    ```jsx theme={null}
    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)",
                    },
                },
            },
        },
    }}
    ```
  </Accordion>

  <Accordion title="Tabs">
    Customize tab appearance:

    ```jsx theme={null}
    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",
                    },
                },
            },
        },
    }}
    ```
  </Accordion>

  <Accordion title="Primary Buttons">
    Style primary buttons:

    ```jsx theme={null}
    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"
            }
          }
        }
      }
    }}
    ```
  </Accordion>
</AccordionGroup>

## Common Examples

### Modern Dark Theme

```jsx theme={null}
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

```jsx theme={null}
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](/payments/embedded/guides/payment-methods)
* [React Hooks](/payments/embedded/guides/hooks)
* [Order Lifecycle](/payments/headless/guides/order-lifecycle)
* [Testing Tips](/payments/advanced/testing-tips)