React SDK

SDK theming

Learn about components and wrappers on the Monite React SDK.

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:

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

Here is a description of all the possible options for the defaultTheme 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.