> This page is for version v2024-05-25 (default).
> For other versions, use one of these documentation indexes:
> - v2024-05-25 (default): https://docs.monite.com/v-2024-05-25/llms.txt
> - v2024-01-31: https://docs.monite.com/v2024-01-31/llms.txt
> - v2023-09-01: https://docs.monite.com/v2023-09-01/llms.txt

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.monite.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.monite.com/_mcp/server.

# Drop-in theming

## Overview

By default, the Drop-in SDK applies Monite’s standard styling. However, you may want to customize this styling to better align with your website’s design or brand identity.

While the fundamental layouts of these Monite components are immutable, you can customize other component properties like colors, fonts, borders, etc.

## Theming mechanism

To customize the components, pass your custom theme object using the theme prop on the MoniteProvider. The following snippet shows an example theme object with all possible options using default values:

```js
const dropinConfig = {
  theme: {
    borderRadius: 6,
    spacing: 8,
    
    colors: {
      primary: '#3737FF',
      secondary: '#707070',
      neutral: '#707070',
      info: '#3737FF',
      success: '#1FBCA0',
      warning: '#C78032',
      error: '#CC394B',
      background: '#FFFFFF',
      text: '#292929',
    },
    
    typography: {
      fontFamily: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
      fontSize: 16,
      h1: {
        fontSize: 48,
        fontWeight: 600,
        lineHeight: '68px',
      },
      h2: {
        fontSize: 34,
        fontWeight: 640,
        lineHeight: '40px',
      },
      h3: {
        fontSize: 24,
        fontWeight: 600,
        lineHeight: '32px',
      },
      subtitle1: {
        fontSize: 20,
        fontWeight: 600,
        lineHeight: '24px',
      },
      subtitle2: {
        fontSize: 18,
        fontWeight: 600,
        lineHeight: '24px',
      },
      body1: {
        fontSize: 16,
        fontWeight: 500,
        lineHeight: '24px',
      },
      body2: {
        fontSize: 14,
        fontWeight: 400,
        lineHeight: '20px',
      }
    }
  }
};

const dropin = new MoniteDropin(dropinConfig);

// Assuming `component` is defined elsewhere:
dropin.create(component).mount(...);
```

Here is a description of all the possible options for the theming object, which allows you to customize the visual style of Monite UI components:

### General

| **Parameter**  | **Type** | **Description**                                                       |
| -------------- | -------- | --------------------------------------------------------------------- |
| `borderRadius` | `number` | Controls the border radius of UI components like buttons, cards, etc. |
| `spacing`      | `number` | Base spacing unit used throughout the UI (in pixels).                 |

---

### `colors`

Color palette used throughout the UI.

| **Parameter**       | **Type** | **Description**                                              |
| ------------------- | -------- | ------------------------------------------------------------ |
| `colors.primary`    | `string` | Main brand color for primary buttons, links, and highlights. |
| `colors.secondary`  | `string` | Secondary color for less prominent UI elements.              |
| `colors.neutral`    | `string` | Neutral tone for borders, dividers, and subtle UI elements.  |
| `colors.info`       | `string` | Informational color (e.g. badges, info alerts).              |
| `colors.success`    | `string` | Success state indicators and confirmations.                  |
| `colors.warning`    | `string` | Warnings and attention-grabbing notifications.               |
| `colors.error`      | `string` | Error states and destructive action indicators.              |
| `colors.background` | `string` | Main background color of the application.                    |
| `colors.text`       | `string` | Default primary text color.                                  |

---

### `typography`

Controls the font styling across the app.

| **Parameter**           | **Type** | **Description**                                               |
| ----------------------- | -------- | ------------------------------------------------------------- |
| `typography.fontFamily` | `string` | Global font family.                                           |
| `typography.fontSize`   | `number` | Base font size in pixels. Other text scales relative to this. |

---

### Typography Variants

Each variant is an object with the following fields: `fontSize`, `fontWeight`, `lineHeight`.

| **Variant**            | **Description**               |
| ---------------------- | ----------------------------- |
| `typography.h1`        | Main page heading             |
| `typography.h2`        | Section heading               |
| `typography.h3`        | Subsection heading            |
| `typography.subtitle1` | Primary subtitle              |
| `typography.subtitle2` | Secondary subtitle            |
| `typography.body1`     | Primary body text             |
| `typography.body2`     | Secondary body text (smaller) |

#### Typography Variant Fields

| **Field**    | **Type** | **Description**                               |
| ------------ | -------- | --------------------------------------------- |
| `fontSize`   | `number` | Font size in pixels.                          |
| `fontWeight` | `number` | Font weight (e.g., 400 = normal, 600 = bold). |
| `lineHeight` | `string` | Line height in `px`.                          |