# OVERVIEW

Building financial services and banking frontends requires time, expertise and resources. Mansar offers a set of White-Label UI Components that simplify the build process, minimize the engineering investment, and significantly shorten time to market, while still providing you with complete flexibility and control.

<figure><img src="/files/L2n3J7C6c0jmwVqbK8kR" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**INFO**

New components will be frequently released, and some functionality may not yet be available.&#x20;
{% endhint %}

### Benefits[​](https://www.unit.co/docs/white-label-uis/#benefits) <a href="#benefits" id="benefits"></a>

* **Speed to market**: Significantly lighter engineering investment compared to an API based approach, that requires substantial domain expertise and engineering investment.
* **Best-in-class experience**: The components are designed and built by banking technology experts, based on shared learnings from dozens of clients and other leading banking apps.
* **Flexibility**: You choose which (if any) components you want to use, and which to build in-house.
* **Performance**: Mansar's UIs are highly performant and are tested using the best performance analysis tools (depending on the platforms).
* **Customizability**: Control the look and feel, as well as micro-copy, to align perfectly with your brand.
* **Compliance, security and risk inside:** Each Component has been designed to be fully compliant and meet industry best-practice standards for security and fraud prevention.

## Customization Options <a href="#customization-options" id="customization-options"></a>

{% file src="/files/QD1GNzrITCyOmzApkkRG" %}

## Themes[​](https://www.unit.co/docs/white-label-uis/#themes) <a href="#themes" id="themes"></a>

The UI Components support multiple themes. You may define as many themes as you want, and within each theme, configure the look and feel to match your brand design. Each theme includes the ability to customize the following:

| Element                      | Customization                                                           |
| ---------------------------- | ----------------------------------------------------------------------- |
| Typography                   | Font family, Title font weight                                          |
| Colors                       | Background, Primary, Secondary, Neutral, Success, Warning, Errors       |
| Buttons                      | Primary button color, Secondary button outline color, link button color |
| Text Inputs                  | Fill and outline colors, focus color, disabled color, corner radius     |
| Menus                        | Icon colors                                                             |
| Drop Downs / Selection Lists | Fill and outline colors, focus state color, corner radius               |
| Component containers / Cards | Corner radius                                                           |

Each of the customizable elements in a theme can be overridden on every specific component (e.g. "While all the buttons in my app are orange, I want the buttons on the card component to be blue"). In addition, there are specific elements on each component that are not a part of the global theme and can be specified on the component level.&#x20;

{% hint style="info" %}
**INFO**

If you have additional customization needs that aren't currently supported by our White-Label UIs, please reach out to Mansar and let us know.
{% endhint %}

## Language & Copy[​](https://www.unit.co/docs/white-label-uis/#language--copy) <a href="#language--copy" id="language--copy"></a>

Mansar offers, by default, an French and English version of the components. However, you can customize the component texts to create multiple different versions of the same language, or to support new languages that we do not currently support.

## Component Availability[​](https://www.unit.co/docs/white-label-uis/#component-availability) <a href="#component-availability" id="component-availability"></a>

Typically, components will be available on web first, and a few weeks later they will be available in the mobile SDKs. You will follow our public roadmap once available to see the planned delivery timeline of each component on the different platforms.

<table><thead><tr><th width="171">Component</th><th>Web</th><th width="142">React Native</th><th width="70">iOS</th><th width="95">Android</th><th>Usage</th></tr></thead><tbody><tr><td>Application form</td><td>N</td><td>Y</td><td>Y</td><td>Y</td><td>Call the API to get a URL and render it in an iframe / webview.</td></tr><tr><td>Statements</td><td>Y</td><td>Y</td><td>Y</td><td>Y</td><td>Call the API to get an HTML / PDF</td></tr><tr><td>Bank verification letter</td><td>Y</td><td>Y</td><td>Y</td><td>Y</td><td>Call the API to get an HTML / PDF</td></tr><tr><td>Card management</td><td>Y</td><td>Y</td><td>Y</td><td>Y</td><td>Web component / Mobile SDK</td></tr><tr><td>Activity</td><td>Y</td><td>Y</td><td>Y</td><td>Y</td><td>Web component / Mobile SDK</td></tr><tr><td>Account</td><td>Y</td><td>Y</td><td>Y</td><td>Y</td><td>Web component / Mobile SDK</td></tr><tr><td>Book payment</td><td>Y</td><td>Y</td><td>Y</td><td>Y</td><td>Web component / Mobile SDK</td></tr><tr><td>Mobile wallet Credit payment</td><td>Y</td><td>Y</td><td>Y</td><td>Y</td><td>Web component / Mobile SDK</td></tr><tr><td>Mobile wallet Debit payment</td><td>Y</td><td>Y</td><td>Y</td><td>Y</td><td>Web component / Mobile SDK</td></tr><tr><td>Multiple Cards</td><td>Y</td><td>Y</td><td>Y</td><td>Y</td><td>Web component / Mobile SDK</td></tr><tr><td>Next Repayment</td><td>Y</td><td>N</td><td>N</td><td>N</td><td>Web component</td></tr></tbody></table>

[<br>](https://www.unit.co/docs/white-label-uis/white-label-app/)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.usemansar.xyz/overview.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.