> ## Documentation Index
> Fetch the complete documentation index at: https://docs.layerswap.io/llms.txt
> Use this file to discover all available pages before exploring further.

# UI Integration Overview

> Ready-to-use UI toolkit for integrating cross-chain swaps

## Overview

The Layerswap UI integration is the fastest way to let your users bridge, swap, and deposit crypto from 90+ sources directly inside your app without building custom infrastructure.

Choose between two simple options — a React Widget or an embeddable iFrame — to enable your users to seamlessly bridge assets across blockchains or deposit directly from centralized exchanges into on-chain wallets. A wide range of customization options are available allowing you to tailor the look and feel to your app’s design and environment.

### Key Highlights

The UI Integration provides:

* A fully-functioning app for bridging and swapping across all the Layerswap supported chains.
* Seperate flows for deposits from CEXes and swaps across chains, and ability to hide one or the other.
* Modular wallet management that can be extended or overriden depending on your integration needs.
* Ability to set defaults: tabs, source chain, destination chain, tokens, destination address.
* Access to widget events to receive swap status updates and handle errors through custom callbacks.
* Wide range of customization options for configuring themes, settings, UI elements and a Playground to preview the updates before going live.

### Ideal For

* dApps, NFT marketplaces, wallets, gaming and DeFi platforms that want a fast solution for enabling cross-chain swaps.
* Projects looking to accept deposits from any ecosystem without building bridging logic.
* Platform interested in onboarding users from Centralized Exchanges in an easy way.

### Get Started

<CardGroup cols={2}>
  <Card title="Widget Quickstart" icon={<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="rgb(var(--primary-light))" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-blocks-icon lucide-blocks"><path d="M10 22V7a1 1 0 0 0-1-1H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-5a1 1 0 0 0-1-1H2"/><rect x="14" y="2" width="8" height="8" rx="1"/></svg>} href="/integration/UI/Widget/Quickstart">
    Get started with the Layerswap Widget
  </Card>

  <Card title="iFrame Setup" icon="code" href="/integration/UI/iFrame">
    Setup the Layerswap iFrame
  </Card>
</CardGroup>