> 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.

# SDK theming

## Overview

All Monite components use the default component styling by default. However, there may be scenarios where you want to customize this default styling to match the look and feel of your website's design or brand identity.

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

## Theming mechanism

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

```jsx
const defaultTheme = {
  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',
    }
  }
};

function App() {
  return (
    <div className="App">
      <MoniteProvider monite={monite} theme={customTheme}>
        ...
      </MoniteProvider>
    </div>
  );
}

export default App;

```

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`.                          |