The SDK provides a set of embeddable UIs that you can integrate into your application. This helps you offer Qonto’s
features within your product without a big integration effort. In order to make these UIs fit your branding, they are
customizable through CSS variables.
The SDK exposes a list of CSS Custom Properties that you can override in your application’s stylesheet. The
way in which you organize your CSS files or the underlying technology you use doesn’t matter, as long as the final
output is CSS you are set up for success. By defining these variables, you can change the appearance of the UI
components present in the embeddable UI Elements. Read the docs of each UI Element to find the list of customizable
components they use and learn how to override their styles.
Customizable components are not directly available as standalone components.
They are only visible as part of the embeddable UI Elements provided by the
SDK, which are complex UIs composed by customizable components. This means a
developer can’t use a customizable component directly, only define the styles
they will show when used within an embeddable UI Element.
There are some CSS variables that apply globally to all UI elements, such as primary colors or font related styles.
Alternatively, it is possible to define finer grained styles that target specific components like buttons or badges.
Continue reading the following sections to learn more about the available UI Elements and how to customize them.