Drop-in

Drop-in theming

Learn how to apply your custom themes to the Drop-ins SDK.

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:

1const dropinConfig = {
2  theme: {
3    borderRadius: 6,
4    spacing: 8,
5    
6    colors: {
7      primary: '#3737FF',
8      secondary: '#707070',
9      neutral: '#707070',
10      info: '#3737FF',
11      success: '#1FBCA0',
12      warning: '#C78032',
13      error: '#CC394B',
14      background: '#FFFFFF',
15      text: '#292929',
16    },
17    
18    typography: {
19      fontFamily: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
20      fontSize: 16,
21      h1: {
22        fontSize: 48,
23        fontWeight: 600,
24        lineHeight: '68px',
25      },
26      h2: {
27        fontSize: 34,
28        fontWeight: 640,
29        lineHeight: '40px',
30      },
31      h3: {
32        fontSize: 24,
33        fontWeight: 600,
34        lineHeight: '32px',
35      },
36      subtitle1: {
37        fontSize: 20,
38        fontWeight: 600,
39        lineHeight: '24px',
40      },
41      subtitle2: {
42        fontSize: 18,
43        fontWeight: 600,
44        lineHeight: '24px',
45      },
46      body1: {
47        fontSize: 16,
48        fontWeight: 500,
49        lineHeight: '24px',
50      },
51      body2: {
52        fontSize: 14,
53        fontWeight: 400,
54        lineHeight: '20px',
55      }
56    }
57  }
58};
59
60const dropin = new MoniteDropin(dropinConfig);
61
62// Assuming `component` is defined elsewhere:
63dropin.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

ParameterTypeDescription
borderRadiusnumberControls the border radius of UI components like buttons, cards, etc.
spacingnumberBase spacing unit used throughout the UI (in pixels).

colors

Color palette used throughout the UI.

ParameterTypeDescription
colors.primarystringMain brand color for primary buttons, links, and highlights.
colors.secondarystringSecondary color for less prominent UI elements.
colors.neutralstringNeutral tone for borders, dividers, and subtle UI elements.
colors.infostringInformational color (e.g. badges, info alerts).
colors.successstringSuccess state indicators and confirmations.
colors.warningstringWarnings and attention-grabbing notifications.
colors.errorstringError states and destructive action indicators.
colors.backgroundstringMain background color of the application.
colors.textstringDefault primary text color.

typography

Controls the font styling across the app.

ParameterTypeDescription
typography.fontFamilystringGlobal font family.
typography.fontSizenumberBase font size in pixels. Other text scales relative to this.

Typography Variants

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

VariantDescription
typography.h1Main page heading
typography.h2Section heading
typography.h3Subsection heading
typography.subtitle1Primary subtitle
typography.subtitle2Secondary subtitle
typography.body1Primary body text
typography.body2Secondary body text (smaller)

Typography Variant Fields

FieldTypeDescription
fontSizenumberFont size in pixels.
fontWeightnumberFont weight (e.g., 400 = normal, 600 = bold).
lineHeightstringLine height in px.