# Getting Started ## Installation Install `comp-kit` and its peer dependencies. I am using `yarn` as the package manager, you can use the package manager of your choice. {% tabs %} {% tab title="npm" %} ```bash npm install @nazeeh2000/comp-kit viem @stitches/react @walletconnect/modal @walletconnect/ethereum-provider ``` {% endtab %} {% tab title="yarn" %} ```bash yarn add @nazeeh2000/comp-kit viem @stitches/react @walletconnect/modal @walletconnect/ethereum-provider ``` {% endtab %} {% tab title="pnpm" %} ```bash pnpm i @nazeeh2000/comp-kit viem @stitches/react @walletconnect/modal @walletconnect/ethereum-provider ``` {% endtab %} {% endtabs %} ## Configuration Once you're done with the installation of the dependencies, you need to set up `KitProvider` at the root of your application. This can be either in your `layout.tsx` (if you're using Next.js 13 `app` directory), `_app.tsx` (if you're using old `pages` directory of Next.js) or `App.tsx` depending on the framework you're using. Below is an example of the Next.js 13 `app` directory. For that, in your `layout.tsx` file, wrap your `children` with `KitProvider` imported from `@nazeeh2000/comp-kit` {% code title="layout.tsx" lineNumbers="true" %} ```tsx 'use client' import { KitProvider } from "@nazeeh2000/comp-kit"; import "./globals.css"; import { Inter } from "next/font/google"; import { arbitrum, mainnet, polygon } from "viem/chains"; const inter = Inter({ subsets: ["latin"] }); export default function RootLayout({ children, }: { children: React.ReactNode; }) { return ( {children} ); } ``` {% endcode %} You have to pass two required props to `KitProvider` i.e. `projectId` and `supportedChains.` * `projectId` refers to the id you get from the WalletConnect dashboard * `supportedChains` accepts an array of the *chains* you want to support for your dapp. These *chains* have to be imported from `viem/chains`.