> ## 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.

# Install Widget

> Package installation and first render steps for the Delora widget.

Start by installing the package and importing its stylesheet once in your application entrypoint.

## Install the package

```bash theme={null}
npm install @deloraprotocol/widget react react-dom
```

`react` and `react-dom` are peer dependencies. The package expects React 18 or newer.

## Optional wallet-management package

Install `@deloraprotocol/widget-wallet-management` only when your app already owns wallet connection state and you want Delora to reuse it through Wagmi or Solana Wallet Adapter.

For EVM apps using Wagmi or a Wagmi-based wallet UI:

```bash theme={null}
npm install @deloraprotocol/widget-wallet-management wagmi
```

For Solana apps using Solana Wallet Adapter:

```bash theme={null}
npm install @deloraprotocol/widget-wallet-management @solana/wallet-adapter-react
```

If you use the Solana Wallet Adapter UI modal shown in examples, also install `@solana/wallet-adapter-react-ui`.

Examples that open a host EVM wallet modal use RainbowKit's `useConnectModal`, but the adapter works with any Wagmi-based wallet UI. Install and configure your chosen wallet UI package separately.

For the auto-detect provider that can handle both EVM and Solana contexts:

```bash theme={null}
npm install @deloraprotocol/widget-wallet-management wagmi @solana/wallet-adapter-react
```

Use subpath imports such as `@deloraprotocol/widget-wallet-management/wagmi` or `@deloraprotocol/widget-wallet-management/solana` when your app only installs one wallet stack.

## Import the widget styles

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

The package ships compiled CSS, so the host app does not need Tailwind.

## Render the trade widget

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

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

The `config` prop is required, but all fields inside `TradeWidgetConfig` are optional. This means `config={{}}` is valid when you want to use the default Delora API base.

## Minimal install notes

* Default API base: `https://api.delora.build`
* Metadata endpoints used by the widget: `/v1/chains`, `/v1/tokens`, and `/v1/tools`
* Quote endpoint used by the widget: `/v1/quotes`
* Optional host-wallet adapters: `@deloraprotocol/widget-wallet-management`
* For browser-based embeds that need authenticated rate limits, keep your Delora API key on your backend and point `config.apiUrl` to your proxy. See [Configure Widget](./configure-widget)
* If your app already manages wallets or receiver state, see [Wallet & Receiver Management](../advanced-setup/wallet-management)