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

# Quickstart

> Embed a DZap swap widget in a few lines of React.

Wrap the subtree that renders the widget with `DZapWidgetProvider`, import styles once, then mount `SwapWidget` (or `ZapWidget`).

<Steps>
  <Step title="Install">
    <Snippet file="install-widget.mdx" />
  </Step>

  <Step title="Provider + swap">
    ```tsx theme={null}
    import { ConnectWalletButton, DZapWidgetProvider, SwapWidget } from '@dzapio/widget';
    import '@dzapio/widget/styles.css';

    const config = {
      walletConnectProjectId: process.env.NEXT_PUBLIC_WC_PROJECT_ID!,
      dzapApiKey: process.env.NEXT_PUBLIC_DZAP_API_KEY,
      appName: 'My dApp',
      theme: 'dark' as const,
    };

    export function App() {
      return (
        <DZapWidgetProvider config={config}>
          <ConnectWalletButton />
          <SwapWidget />
        </DZapWidgetProvider>
      );
    }
    ```
  </Step>

  <Step title="Optional: open as a drawer">
    Use `SwapButton` or `ZapButton` instead of the inline form:

    ```tsx theme={null}
    import { DZapWidgetProvider, SwapButton } from '@dzapio/widget';
    import '@dzapio/widget/styles.css';

    <DZapWidgetProvider config={config}>
      <SwapButton label="Open swap" />
    </DZapWidgetProvider>
    ```
  </Step>
</Steps>

The provider loads supported chains from DZap, mounts wallet connectors (EVM, Solana, Bitcoin, Sui), and applies your theme. Until chains load, it shows a short loading state.

## Next

<CardGroup cols={2}>
  <Card title="Configuration" icon="sliders" href="/widget/widget/configuration">
    Chains, providers, hidden UI, defaults.
  </Card>

  <Card title="Swap widget" icon="arrows-rotate" href="/widget/widget/swap">
    Props, locking tokens, drawer trigger.
  </Card>

  <Card title="Zap widget" icon="bolt" href="/widget/widget/zap">
    Deposit, withdraw, migrate into DeFi positions.
  </Card>

  <Card title="Theming" icon="palette" href="/widget/widget/theming">
    Light/dark/auto and custom tokens.
  </Card>
</CardGroup>