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

# Overview

> Core capabilities and integration patterns for the Delora widget package.

Delora Widget lets you embed Delora trading flows into a React application. The main package is published as `@deloraprotocol/widget`, and its main export is `TradeWidget`, which loads chain and token metadata, requests quotes from `/v1/quotes`, and lets users execute trades from the same UI.

The package also includes:

* `TradeWidgetWalletProvider` for low-level host-managed wallet integrations
* `useTradeWidgetWalletManagement` for reading the wallet-management context
* TypeScript types for configuration, events, filters, tokens, networks, and wallet management

For apps that already use Wagmi, RainbowKit, Reown, Dynamic, or Solana Wallet Adapter, Delora also provides the optional `@deloraprotocol/widget-wallet-management` package. It contains ready-made wallet adapters that connect those host wallet contexts to `TradeWidget`.

## What the widget supports

* Delora metadata loading from `/v1/chains` and `/v1/tokens`
* Quote requests to `/v1/quotes`
* Internal wallet connection UI for EVM and Solana wallets
* External wallet integration through `TradeWidgetWalletProvider`
* Optional Wagmi and Solana Wallet Adapter integration through `@deloraprotocol/widget-wallet-management`
* Separate origin and destination wallet flows
* Receiver selection through a connected destination wallet or a pasted address
* Side-specific network and token filters
* Initial token and network selection
* Locking sell or buy tokens and networks
* Auto-refreshing quotes with a built-in countdown and manual refresh
* Theme customization through `theme`, `vars`, `className`, and `style`
* Event hooks for quotes, wallet connections, transaction submission, confirmation, and errors

## Quick start

```tsx theme={null}
import "@deloraprotocol/widget/styles.css";
import { TradeWidget } from "@deloraprotocol/widget";

export function App() {
  return (
    <TradeWidget
      theme="dark"
      config={{}}
    />
  );
}
```

Passing `config.apiUrl` is not required. If it is omitted, the widget falls back to `https://api.delora.build`.

The package currently ships one main trading UI. The main integration choice is wallet ownership, not a visual variant such as compact or drawer mode.

## Built for embedded use

The widget ships compiled CSS, so host applications do not need Tailwind or PostCSS configuration. Styles are scoped under the widget root instead of using global Tailwind preflight rules, which keeps the widget isolated from most host styling.

## Next steps

* [Install Widget](./basic-setup/install-widget)
* [Integration Patterns](./basic-setup/integration-patterns)
* [Configure Widget](./basic-setup/configure-widget)
* [Customize Widget](./basic-setup/customize-widget)
* [Wallet & Receiver Management](./advanced-setup/wallet-management)
* [Widget API Reference](./advanced-setup/widget-api-reference)