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

# Widget Overview

> Embed DZap swap, bridge, and zap UI, or connect multi-chain wallets without building the UI yourself.

`@dzapio/widget` is the embeddable React SDK for DZap. Drop a production-ready swap, bridge, or zap form into any dApp. Wallet connection, route aggregation, transaction execution, and theming are built in.

`@dzapio/wallet` is the multi-chain wallet layer the widget uses internally. Install it on its own when you want connect UI and account state without the swap/zap form.

Both packages sit on the [DZap API](/api/introduction) and [`@dzapio/sdk`](/sdk/overview).

<Note>
  `@dzapio/widget` and `@dzapio/wallet` are currently published as **beta** (`0.0.1-beta.0`). APIs are typed and usable; treat the version as pre-1.0.
</Note>

## Which package?

| Package                                     | Use when                                                  | Includes wallets                       |
| ------------------------------------------- | --------------------------------------------------------- | -------------------------------------- |
| [`@dzapio/widget`](/widget/installation)    | You want a swap, bridge, or zap UI in your app            | Yes — `@dzapio/wallet` is a dependency |
| [`@dzapio/wallet`](/widget/wallet/overview) | You only need multi-chain connect, accounts, and balances | This package is the wallet layer       |

If you install the widget, you do **not** need to install `@dzapio/wallet` separately.

## What you get

* **Swap and bridge** — Cross-chain token swaps with route comparison and slippage controls.
* **Zap** — One-click liquidity and yield actions (deposit, withdraw, migrate) across supported protocols.
* **Multi-chain wallets** — EVM (Wagmi / WalletConnect), Solana, Bitcoin, and Sui out of the box.
* **Inline or drawer** — `SwapWidget` / `ZapWidget` inline, or `SwapButton` / `ZapButton` as a drawer trigger.
* **Theming** — Light, dark, or auto, plus color, radius, font, and surface tokens.
* **Host control** — Default chains and tokens, provider allowlists, hidden/disabled UI, and lifecycle events.

## How it fits DZap

```
Your app
  └── DZapWidgetProvider
        ├── @dzapio/wallet   (connect, accounts, balances)
        ├── SwapWidget / ZapWidget
        └── @dzapio/sdk + DZap APIs  (quotes, build, execute, status)
```

For a headless integration with no UI, use the [SDK](/sdk/overview) or [REST APIs](/api/introduction) instead.

## Where to next

<CardGroup cols={2}>
  <Card title="Installation" icon="download" href="/widget/installation">
    Packages, peers, styles, and bundler setup.
  </Card>

  <Card title="Quickstart" icon="rocket" href="/widget/quickstart">
    Provider + SwapWidget in a few lines.
  </Card>

  <Card title="Widget configuration" icon="sliders" href="/widget/widget/configuration">
    `WidgetConfig`: chains, providers, theme, hidden UI.
  </Card>

  <Card title="Wallet package" icon="wallet" href="/widget/wallet/overview">
    Standalone `@dzapio/wallet` for connect-only hosts.
  </Card>
</CardGroup>