iOS
For rich documentation of the Connect for iOS SDK, including topics such as theming and data models, refer to the MoneyKit framework documentation.
Web
By default Connect will use the standard moneyui theme. You can selectively override certain parts of the default theme or pass in your full theme object configuration.
// Import default `moneyui` theme from @moneykit/connect.
import MoneyKit, { moneyui } from "@moneykit/connect";
import type { Theme } from "@moneykit/connect";
// Option 1: Standard `moneyui` theme.
// This default behavior is equivalent to:
const moneykitWithDefaultTheme = new MoneyKit({
theme: moneyui,
});
// Option 2: Modify the default theme with just the styles you wish to override.
// If you only need to change a few styles, this is your best option.
const tweakedTheme: Theme = {
...moneyui,
colors: {
...moneyui.colors,
accent: "#FF9400",
}
};
const moneykitWithTweakedTheme = new MoneyKit({
theme: tweakedTheme,
});
// Option 3: Create your own complete theme object from scratch.
// Useful when you want an entirely custom theme with control over
// all values. Here is an example using values from `moneyui`.
const customTheme: Theme = {
colors: {
accent: "#0077ff",
primaryBackground: {
light: "#fff",
dark: "#212124",
},
secondaryBackground: {
light: "#f2f2f5",
dark: "#212124",
},
primaryContent: {
light: "#fff",
dark: "#343438",
},
secondaryContent: {
light: "#f5f5f5",
dark: "#343438",
},
primaryForeground: {
light: "#111",
dark: "#fff",
},
secondaryForeground: {
light: "rgba(67, 67, 76, 0.6)",
dark: "rgba(235, 235, 245, 0.6)",
},
tertiaryForeground: {
light: "rgba(67, 67, 76, 0.3)",
dark: "rgba(235, 234, 244, 0.3)",
},
primaryFill: {
light: "rgba(120, 120, 128, 0.2)",
dark: "rgba(120, 120, 128, 0.36)",
},
secondaryFill: {
light: "rgba(120, 120, 128, 0.16)",
dark: "rgba(120, 120, 128, 0.32)",
},
tertiaryFill: {
light: "rgba(118, 118, 128, 0.12)",
dark: "rgba(118, 118, 128, 0.24)",
},
success: {
light: "#00ca32",
dark: "#35DE5F",
},
warning: {
light: "#ff9500",
dark: "#FF9400",
},
error: {
light: "#dd2424",
dark: "#FA4242",
},
separator: {
light: "rgba(60, 60, 67, 0.06)",
dark: "rgba(84, 84, 88, 0.4)",
},
selection: {
light: "rgba(120, 120, 128, 0.28)",
dark: "rgba(120, 120, 128, 0.48)",
},
},
typography: {
// We currently support Inter and system fonts out of the box.
// Custom fonts need to be hosted from the same origin
// as the Connect SDK for security reasons.
//
// If you'd like to use custom fonts, please contact
// the MoneyKit Team and we'll set it up for you.
fontFamily:
"Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif",
largeTitle: {
size: "34px",
lineHeight: "41px",
letterSpacing: "-0.01em",
weight: 700,
},
title1: {
size: "28px",
lineHeight: "34px",
letterSpacing: "0",
weight: 700,
},
title2: {
size: "22px",
lineHeight: "28px",
letterSpacing: "0",
weight: 700,
},
title3: {
size: "20px",
lineHeight: "24px",
letterSpacing: "0",
weight: 700,
},
body: {
size: "17px",
lineHeight: "24px",
letterSpacing: "-0.01em",
weight: 500,
},
smallBody: {
size: "11px",
lineHeight: "16px",
letterSpacing: "-0.0225em",
weight: 400,
},
button: {
size: "18px",
lineHeight: "24px",
letterSpacing: "-1%",
weight: 700,
},
input: {
size: "18px",
lineHeight: "24px",
letterSpacing: "0",
weight: 500,
},
},
images: {
// Please contact the MoneyKit Team if you want to use custom images.
// They need to be hosted from the same origin
// as the Connect SDK for security reasons.
},
spacing: {
contentHorizontalInset: "28px",
buttonHorizontalInset: "28px",
},
components: {
navigationBar: {
height: "64px",
},
contentView: {
borderRadius: "12px",
boxShadow: {
light: "none",
dark: "inset 0 0 0 1px rgba(228, 227, 243, 0.04)",
},
border: null,
separatorStyle: "all_except_last",
},
button: {
height: "44px",
borderRadius: "12px",
inheritInstitutionColor: true,
continueTitle: "Continue",
doneTitle: "Done",
},
searchInput: {
backgroundColor: {
light: "rgba(118, 118, 128, 0.12)",
dark: "rgba(118, 118, 128, 0.24)",
},
height: "48px",
borderRadius: "12px",
border: null,
alignment: "center",
focus: {
glow: true,
backgroundColor: null,
border: null,
boxShadow: null,
},
},
textField: {
backgroundColor: null,
height: "52px",
borderRadius: "0px",
boxShadow: null,
focus: {
glow: true,
backgroundColor: null,
border: null,
boxShadow: null,
},
},
progressSpinner: {
strokeWidth: 8,
diameter: 56,
lineCap: "round",
color: {
light: "#0077ff",
dark: "#0077ff",
},
},
icon: {
strokeWidth: 8,
lineCap: "round",
},
separator: {
height: "1px",
},
checkbox: {
offColor: {
light: "rgba(118, 118, 128, 0.12)",
dark: "rgba(118, 118, 128, 0.24)",
},
onColor: {
light: "#0077ff",
dark: "#0077ff",
},
},
radio: {
offColor: {
light: "rgba(118, 118, 128, 0.12)",
dark: "rgba(118, 118, 128, 0.24)",
},
onColor: {
light: "#0077ff",
dark: "#0077ff",
},
},
connectedIcon: {
color: {
light: "#00ca32",
dark: "#35DE5F",
},
},
},
screens: {
finder: {
title: "Connect Your Bank",
subtitle: null,
searchPlaceholder: "Search Banks",
institutionCellBoxShadow: null,
institutionCellBorderRadius: "12px",
institutionCellBorder: {
light: "1px solid rgba(60, 60, 67, 0.1)",
dark: "1px solid rgba(84, 84, 88, 0.4)",
},
institutionCellSpacing: "16px",
institutionCellBackgroundColor: {
light: "#fff",
dark: "#212124",
},
},
},
modal: {
borderRadius: "20px",
boxShadow: {
light: "0px 2px 4px rgba(0, 0, 0, 0.1), 0 40px 80px rgba(0,0,0,.15)",
dark: "inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 0 1px black, 0px 6px 18px rgba(0, 0, 0, 0.3)",
},
overlayBackgroundColor: {
light: "rgba(0, 0, 0, 0.4)",
dark: "rgba(0, 0, 0, 0.75)",
},
overlayBackdropFilter: null,
},
popover: {
borderRadius: "24px",
boxShadow: {
light: "0px 0px 80px rgba(0, 0, 0, 0.16)",
dark: "inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 0 1px black, 0px 6px 18px rgba(0, 0, 0, 0.3)",
},
},
};
const moneykitWithCustomTheme = new MoneyKit({
theme: customTheme,
});
Android
Coming soon.
React Native
Coming soon.