Install Widget

The widget can be installed on any web page with just a few lines of code. This will help to bring cross-chain swaps across multiple chains with the most efficient pricing to your website.

Install the widget via npm or yarn or pnpm

npm i @kanalabs/kana-widget


yarn add @kanalabs/kana-widget


pnpm install @kanalabs/kana-widget

Basic example

Here is an example of a basic app using Kana Widget.

import { KanaWidget, WidgetConfig } from "@kanalabs/kana-widget";

const widgetConfig: WidgetConfig= {
    // Required: The unique SDK key provided by the developer. This key is essential for the widget to function properly.
    // If you haven't received a key yet, please contact the development team to obtain one.
    sdkKey: "Your dApp/company SDK key"

export const WidgetPage = () => {
  return (
    <KanaWidget config={widgetConfig} />


If you are facing any issue like .

// BREAKING CHANGE: webpack<5 used to include polyfills for node.js core modules by default.

Please add custom webpack settings to **config-overrides.js**. For further details regarding custom webpack settings refer [here] .

Last updated