> For the complete documentation index, see [llms.txt](https://docs.kima.network/kima-network/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.kima.network/kima-network/the-kima-sdk/add-kima-widget-to-your-app/widget-install.md).

# Installation

Add the widget to your React project using `npm` or your favorite JavaScript package manager.

```bash
npm install @kimafinance/kima-transaction-widget redux react-redux pino-pretty
```

You'll need to add the following:

* The `<KimaProvider>` component in `App.tsx`
* The `<KimaTransactionWidget>` which interacts with Kima
* A link to the Kima Transaction Backend (or build your own)
* A Reown project id

For the purposes of this example, we'll just add the widget to `App.tsx`, but it can go anywhere it makes sense for your project.

Open `App.tsx`, wrap your existing components with the `<KimaProvider>` and add the `<KimaTransactionWidget>` component.

If you don't have one already, you'll need to get a free Reown project ID from [Reown Cloud](https://cloud.reown.com/sign-in) and pass it to the `projectId` prop on `<KimaProvider>`.

```tsx
import React from 'react'

import {
  KimaTransactionWidget,
  KimaProvider,
  ModeOptions,
  ColorModeOptions
} from '@kimafinance/kima-transaction-widget'
import '@kimafinance/kima-transaction-widget/index.css'

const App = () => {
  return (
    <KimaProvider
      projectId='your-project-id'
      kimaBackendUrl='http://localhost:4000'
    >
      <KimaTransactionWidget
        theme={{ colorMode: ColorModeOptions.light }}
        mode={ModeOptions.bridge}
      />
    </KimaProvider>
  )
}

export default App
```

The widget detects the active environment from your backend `/chains/env` endpoint, so you do not need to pass a `networkOption` prop manually.

In the following sections, we'll go through the framework-specific configuration for Vanilla React and NextJS.