> For the complete documentation index, see [llms.txt](https://docs.leapwallet.io/cosmos/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.leapwallet.io/cosmos/elements/components/multi-view.md).

# Multi View

The `MultiView` component is a versatile interface that integrates three key functionalities: Swaps, Buy, and Transfer, all within a single view.

This component is designed to allow users to navigate between these functionalities effortlessly.

<div align="left"><figure><img src="/files/xMv37Im8HF1cjotn9vrV" alt="" width="375"><figcaption></figcaption></figure></div>

### Props

**`className`** (optional):

Add classes for custom styling to the container of this component

**`tabsConfig`** (optional):\
A configuration object that allows you to enable or disable specific tabs within the `MultiView` component. You can also set the order in which these tabs appear. The configuration is structured as follows:

```javascript
export type TabsConfig = {
  [Tabs.TRANSFER]?: TransferTabConfig, // Configuration for the Transfer tab
  [Tabs.FIAT_ON_RAMP]?: FiatOnRampTabConfig, // Configuration for the Buy tab
  [Tabs.SWAPS]?: AggregatedSwapTabConfig, // Configuration for the Swaps tab
}
```

Each config option accepts all the props accepted by the respective components. You can refer to those props here -

1. [Swaps](/cosmos/elements/components/aggregated-swaps.md#props)
2. [Fiat On-ramp](/cosmos/elements/components/fiat-on-ramp.md#props)
3. [Transfer](/cosmos/elements/components/ibc-transfer.md#props)